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2.21.6. Количество повторений анимации..................... ини ини 185 
2.21.7. Направление анимации ................. иене 185 
2.21.8. Текущее состояние анимации ................. линии 186 
2.21.9. Состояние элемента до начала анимации и после ее завершения............................ 186 
2.21.10. Одновременное задание всех параметров анимации .............................................. 187 
2.21.11. Сложная анимация : елена ии 188 
2.22. Двумерные трансформации ............... +... 188 
2-22: Атрибут аитор аана нынан ыда тындырды дең 188 
2:22:2226мешениереоипининидипдавирифзяаншың а ЕНЕНЕ 189 
2.22.3. Изменение масштаба.................. ии 189 
222.4. Наклон: зола наи АНТЫН 190 
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3.1.8. Окно с полем ввода и кнопками ОК и Саипсе|........... 1. иииилинилинииниинниние 210 
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3.5.10. Бесконечность и значение МаМ............ 4... ениинеиинн 244 
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3:7.1::Инициализация строк. ии це мнкемен иное 261 
3.7.2. Специальные символы в строке... ЛГ. 262 
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3.9. Работа с датой и временем................. ини ННН 279 
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3.9.2. Указание произвольных значений даты и времени.......тила 279 
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3.9.6. Таймеры. Создание часов на \!еЬ-странице............... ини 284 
3.10. Функции. Разделение программы на фрагменты............... нии ииилиниииинииииииииини 285 
3:101- Создание функции  ерицасвиванмеин н НЬ Н Ка ЫН Шы 285 
3.10.2. Расположение функций внутри НТМІ-документа..........м.0мм0000аааааааааааааааааы 287 
2210:3< Класс: FUNGON oeiee дер А ырды дыны AE на аа раа а ЫНА 288 
3.10.4. Переменное число параметров в функции............аыМ М 000 Ше агеӘееееееееееекегеккее 289 
3.10.5. Глобальные и локальные переменные................ нение анан: 290 
3.10.6. Область видимости блока.............. ини 291 
3.10.7. Способы передачи параметров в функцию.........ештыығ-ш 293 
3.10.8. Необязательные параметры............... ини 293 
3.10.9. Анонимные функциИ............. 1... 294 
3.10.10. Стрелочные функции ............. 1... 295 
3.10.11. Функции-генераторы.. иене 297 
3.10.12. Рекурсия. Вычисление факториала................ нии ининиинииининииненини 298 
3211, Классыи объекты алаа нин вании нова 298 
3.1151: Основные ПОНЯТИЯ. опар нии 299 
3.11.2 Класс Object нда еб ити они 299 
3.11.3. Создание объекта с помощью фигурных скобок........./-тғзызшта-ш-а 300 
3:114: Конетрукторкласса ранки ричи 301 
3.15: Инструкция:сІазбыманадддыаыйарылыйЫНарны ынды ии оо E 302 
3.11.6::Свойства и методы класса... ила ии сы өле 304 
3.11.7. Перебор свойств объекта............. +. ииеинеиненнне 305 
3.11.8. Проверка существования свойств и методов...........әеаеееыыыы 305 
ЗСО: Ирототиныы: ии пана ини ера, 306 
3.11.10Пространстваимена илсе нии ини 308 
3:12; Обработка: ошибок: зислниланониии оладьи овала ван 310 
3.12.1. Синтаксические ошибки... ННН 310 
321222 Логические ошибки ори аны ЕН 311 
3.12.3. Ошибки времени выполнения ............. ини 311 
3.12:4.:Обработка ошибок. senses saas a Манин ннен a 312 
3.12.5. Оператор throw. Генерация исключений................. ии 313 
3.12.6. Отладка программы в \е-браузере Ғігеюх........:еетеятлтяш 313 
О ниНииынанұларапнұ ынасы ЕРЕН 314 
3.13.1. Назначение обработчиков событий............. 1... нининиииииииииининииииниииишенинни 314 
3.13:2.7Удаление обработчикбвснооооомгананцысдағыдмерияланындан ынан ыда ние 316 
3:13:3::Указатель: Й ани лым виа ель а ЫРЫ 316 


3.19.4; Объект ера ое ды А АА ЫЫ анары 317 
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3.13.5. Действия по умолчанию и их отмена....... ее еее 318 
3.136. Всплынание событий. алина амен ЙЫ e e 320 
3:13:2:Фазы событий гадан Ы тире Илем Ран енд E 322 
3,13.8: События документа оововасиомиекаксириан има Ы е таекк ене ИНН 323 
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ЗАЗ. События Формы: икасовлыңмейадынншағыдыыда ыл ыан дыы. 327 
3.14. Обьектная модель документа (РОМ)........... +. наннан 329 
3.14.1. Структура объектной модели.............. ини 329 
ЗА. Объектти оу а ЫА наьа она 330 
3:14:3::Работа:с фреймами: Дааа ДАНА а АННАН 331 
3.14.4. Объект navigator. Получение информации о \еБ-браузере .................................... 331 
3.14.5. Объект screen. Получение информации о мониторе пользователя.......................... 332 
3.14.6. Объект location. Разбор составляющих ОКІ -адреса документа.............................. 333 
3.14.7. Объект history. Получение информации о просмотренных страницах.................... 333 
3.14.8. Объект document. Получение полной информации о НТМІ -документе................. 334 
314,9) УЗЛыдокумМмента;мевицеевцолондиясаниыагаын еки нА нан наа 336 
3.14.10. Общие свойства и методы элементов У/еВ-страницы.......-е-ьал 339 
3.14.11. Работа с таблицами стилей при помощи /ауа5сгірі........:ш 341 
3.14.12. Обьект selection. Проверка наличия выделенного фрагмента................................ 342 
3.14.13. Объект Range. Расширение или сжатие выделенного фрагмента текста .............. 344 
3.14.14. Сохранение данных на компьютере клиента.......Штлтегеш-ш 347 
3.15. Работа с элементами формы ...............аг иииинииииииииииииинииииииииииииниинииниииинеиинние 350 
2451Элементы:управленияссәлайырыпшаганмесициыйындынлырынадыыйынаыыыраН 350 
3.15.2. Коллекция forms. Доступ к элементу формы из скрипта.......... 351 
3.15.3. Свойства объекта формы............. +. ииииниинеиненнне 351 
3.15.4. Методы объекта формы............. 1. 352 
3.15.5. События объекта формы.............. ии 352 
3.15.6. Текстовое поле и поле ввода пароля.........о.омолғ4/4ғғы 1а 353 
3.15.7. Поле для ввода многострочного текста............. нии иининниинииния 355 
3.15.8. Список с возможными значениями..... их мы 357 
3.15.9. Флажок и переключатели......л ем м ее е- 361 
3.15.10. Кнопки. Обработка нажатия кнопки.............. +... 363 
3.15.11. Работа с элементами управления ............... линии ананан: 365 
3.15.12. Расширенная проверка значения, занесенного в поле ввода.................................. 366 
3.16. Работа с графическими изображениями................ 1... 367 
3:17, Работас мультимедиа; ини ини 368 
3.17.1. Свойства аудио- и видеороликов....... еле ее 368 
3.17.2. Методы аудио- и видеороликов.. лем 370 
3.17.3. События аудио- и видеороликов............ 4... 370 
3.18. Холст в HTML 5. Программируемая графика...........0ма0ы1уү1ғыүӛыүуғуаӛғӛғұғəтаттаатыыыыыы 371 
3.181: Тег йит: аана ое о Иоанне 371 
3.18.2. Создание контекста рисования............. 4... ини наана 371 
3.18.3. Изменение характеристик заливки... ее ее 372 
3.18.4. Изменение характеристик обводкИ.............. нии 372 
3.18.5. Рисование прямоугольников ....... еееелг ее 374 
3.18.6. Очистка прямоугольной области или всего холста.......аыеыыа 374 
3.18.7:Вывод:текётах,-. аеннан НЕА 374 


3:18.8:.Вывод:изображения т.ли Ынна Анн 376 
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3.18.9. Рисование траектории............... нии AA e TE Ee a TE 377 
3.18.10. Определение вхождения точки в состав контура........иыш 379 
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Введение 


Если вы хотите научиться своими руками создавать сайты, свободно владеть 
HTML, CSS, JavaScript, PHP и MySQL, то эта книга для вас. Большинство подоб- 
ных книг предлагают изучение или только клиентских технологий (HTML, CSS, 
JavaScript), или только серверных (РНР, MySQL). Но разделять эти технологии 
нельзя, т. к. они могут существовать только совместно, а значит, и изучать их нуж- 
но как единое целое. 


Все главы книги расположены в порядке возрастания уровня сложности материала. 
Если вы начинающий Меб-мастер, то книгу следует изучать последовательно, гла- 
ву за главой. Если же материал какой-либо из глав был вами изучен ранее, то мож- 
но сразу переходить к следующей главе. 


Что же можно создать с использованием описываемых технологий? Давайте кратко 
рассмотрим возможности этих технологий, а также содержание глав книги. 


Язык разметки HTML, рассматриваемый в главе 1, позволяет задать местоположе- 
ние элементов \еБ-страницы в окне УУер-браузера. С помощью HTML можно 
отформатировать отдельные символы или целые фрагменты текста, вставить изо- 
бражение, таблицу или форму, создать панель навигации с помощью карт-изобра- 
жений, разделить окно \!еБ-браузера на несколько областей, вставить гиперссылку 
и многое другое. А новая версия языка HTML — HTML 5 — даже позволяет 
поместить на страницу аудио- или видеоролик, который будет воспроизводиться 
самим У/ер-браузером, без необходимости устанавливать какие бы то ни было NJIA- 
гины. 


При помощи каскадных таблиц стилей (CSS), о которых идет речь в главе 2, можно 
задавать точные характеристики практически всех элементов У/еВ-страницы. Это 
позволяет контролировать внешний вид \еБ-страницы в окне \!еБ-браузера и npu- 
ближает возможности М№МеБ-дизайна к настольным издательским системам. Разра- 
ботчик может указать параметры шрифта, цвет текста и фона, выравнивание, соз- 
дать рамку и расположить элементы на странице произвольным образом. Новая 
версия CSS — CSS 3 — также предоставляет инструменты для задания градиентно- 
го фона, теней у текста и самого элемента страницы и даже для создания анимации. 


У УеБ-страниц, созданных с использованием HTML и CSS, есть существенный He- 
достаток — они являются статическими, т. е. не могут меняться, реагируя на дейст- 
вия пользователя. Внедрение в НТМГ-код программ, написанных на языке 
JavaScript, позволит «оживить» \еБ-страницу, сделать ее интерактивной или, дру- 
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гими словами, заставить взаимодействовать с пользователем. С помощью JavaScript 
можно обрабатывать данные формы до отправки на сервер, получать информацию 
о \!еБ-браузере пользователя и его мониторе и соответствующим образом менять 
форматирование страницы, изменять любые элементы НТМГ-документа в ответ на 
какое-либо событие, создавать на \еБ-странице часы, показывающие текущее вре- 
мя с точностью до секунды, скрывать или отображать элементы \е-страницы 
и выполнять многие другие действия. Как все это сделать, рассказано в главе 3. 


Глава 4 повествует о том, как установить и настроить специальное программное 
обеспечение для тестирования сайтов: \еБ-сервер Apache, среду для выполнения 
серверных скриптов, написанных на языке РНР, и сервер баз данных МУЗОГ. С его 
помощью можно проверить работоспособность создаваемого сайта непосредствен- 
но на своем компьютере, еще до его публикации в Интернете. 


Огромные возможности открывают серверные технологии, среди которых для 
целей этой книги выбран язык программирования РНР. Используя его, можно из- 
менять получаемый \еБ-браузером НТМГ-код в зависимости от вводимых пользо- 
вателем данных, типа и версии установленного УУер-браузера и других факторов. 
Большое количество расширений и готовых программных продуктов, а также лег- 
кость освоения, сделали РНР очень популярным языком программирования для 
Интернета. С помощью РНР можно работать с файлами и каталогами, обрабаты- 
вать данные формы на сервере, рассылать письма, загружать файлы на сервер, соз- 
давать для каждого пользователя личный кабинет, программировать гостевые кни- 
ги, форумы, блоги, интернет-магазины и многое другое. Писать программы на РНР 
мы научимся в главе 5. 


На сегодняшний день ни один крупный портал не обходится без использования баз 
данных. В \МеБ-разработках чаще всего применяется быстрая и обладающая боль- 
шими возможностями система управления базами данных (СУБД) MySQL. С no- 
мощью MySQL можно эффективно добавлять, изменять и удалять данные, полу- 
чать нужную информацию по запросу. Работа с MySQL, в том числе с базами дан- 
ных этого формата из программ, написанных на РНР, обсуждается в главе 6. 


В главе 7 описывается технология AJAX, позволяющая программно подгружать 
с сервера произвольные данные без перезагрузки самой страницы. Применение 
технологии AJAX позволяет значительно расширить функциональность создавае- 
мых сайтов. 


В сопровождающем книгу электронном архиве, размещенном на сайте издательст- 
ва «БХВ-Петербург» (см. приложение), собраны следующие материалы: 


O описание процесса разработки полнофункционального УУеВ-сайта с использова- 
нием всех изученных технологий. Это каталог сайтов, включающий личный ка- 
бинет для пользователей с защитой средствами РНР, а также личный кабинет 
для администратора, защищенный средствами сервера Арасһе; 


П все листинги, встречающиеся в тексте книги. Настоятельно рекомендуем обяза- 
тельно рассматривать все примеры из книги и вначале самостоятельно набирать 
код. При наборе вы создадите множество ошибок. Но именно умение находить 
эти ошибки сделает из вас настоящего У/ер-мастера. 


Авторы желают вам приятного чтения и надеются, что эта книга станет верным 
спутником в вашей программистской практике. 


ГЛАВА 1 


Основы НТМІ. 5. 
Создаем дизайн сайта 


1.1. Первые шаги 


HTML (HyperText Markup Language) — это язык разметки документа, описываю- 
щий форму отображения информации на экране компьютера. В настоящее время 
язык существует в нескольких версиях: HTML 4.01, XHTML и HTML 5. 

Версию языка HTML 5 поддерживают сейчас следующие \еБ-браузеры: 

O Microsoft Internet Explorer — начиная с версии 9; 

О Mozilla Firefox — 4.0; 

O Google Chrome — 6.0; 

O Opera— 11.1; 

O Apple Safari — 5.0. 

Как можно видеть, HTML 5 поддерживается уже всеми современными Web-6pay- 
зерами, поэтому мы будем изучать именно его, без оглядки на предыдущие версии. 
Для новых тегов и параметров, появившихся в НТМІ. 5, мы будем явно указывать 
версию языка. Поэтому, если у вас есть большое желание поддерживать старые 
версии \\!еБ-браузеров, то теги и параметры, обозначенные версией HTML 5, лучше 
не использовать или предусматривать стилизацию новых тегов — например, опи- 


сывать их как блочные с помощью С585-атрибута display (display: block) и/или 
создавать элементы в JavaScript. 


ПРИМЕЧАНИЕ 


Получить полную информацию о текущей поддержке тегов и параметров У/ер-брау- 
зерами можно на сайте https://caniuse.com/. 


1.1.1. Основные понятия 


При создании документа часто приходится выделять какую-либо часть текста 
полужирным шрифтом, изменять размер или цвет шрифта, выравнивать текст по 
центру страницы и т. д. В текстовом редакторе для этого достаточно выделить 
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нужный фрагмент и применить к нему форматирование. Например, чтобы пометить 
текст курсивом, нужно выделить его и нажать кнопку Курсив. На языке НТМІ, тот 
же эффект достигается следующей строкой кода: 


<1>Текст</1> 


Комбинация символов <1> указывает, что текст надо выделить, начиная с этого 
места, а </1> отмечает конец выделенного фрагмента. 


Комбинации символов <1> и </1> принято называть тегами. С помощью тегов опи- 
сывается вся структура документа. Теги выделяются угловыми скобками < и >, 
между которыми указывается имя тега. Большинство тегов являются парными, т. е. 
состоят из открывающего тега (<1>) и соответствующего ему закрывающего (</1>). 
Закрывающий тег отличается наличием косой черты (/) перед его именем. Есть 
также теги, вообще не имеющие закрывающего тега, — например, тег переноса 
строки <br>. 


Некоторые теги могут иметь параметры (иногда их называют атрибутами). Пара- 
метры указываются после имени тега через пробел в формате параметр="значение". 
Если параметров несколько, то они приводятся через пробел: 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 


В этом примере параметру http-equiv Tera <meta> присвоено значение Content-Type, 
а параметру content — значение text/html; charset=utf-8 


Теги могут вкладываться друг в друга: 

<р><1>Правильно</1></р> 

При вложении тегов необходимо соблюдать последовательность их закрытия. На- 
пример, такой код использовать нельзя: 

<р><і>Ошибка</р></і> 

Теги бывают блочными и строчными. Блочный тег занимает всю ширину роди- 
тельского элемента. Примером блочного тега является тег <p>, описывающий абзац. 
Строчный тег может быть расположен только внутри блочного тега. Примером 
строчного тега является тег <1>, указывающий, что фрагмент нужно выделить кур- 


сивом. Так как блочный тег <р> не может быть расположен внутри строчного тега 
<1>, следовательно, так вкладывать теги также нельзя: 


<1><р>Ошибка</р></1> 
Открывающие и закрывающие теги со всем их содержимым мы будем называть 
элементами. Например, в следующем примере описан элемент р: 


<р>Текст абзаца</р> 


ПРИМЕЧАНИЕ 


В HTML названия тегов и параметров можно записывать в любом регистре, а в языке 
XHTML только в нижнем регистре. Рекомендуем всегда записывать теги в нижнем pe- 
гистре. Именно так мы и будем записывать их в дальнейших примерах. 
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Просматривать НТМІ.-документы можно с помощью специальных программ, KOTO- 
рые называют И/ер-браузерами. УҮ/еһ-браузеры отображают документы с формати- 
рованием, выполненным на основе исходного кода, описываюшего структуру 
документа. 


Результат интерпретации НТМІ.-документа, отображаемый в окне УУер-браузера, 
называется Ўер-страницей. В отличие от НТМГ-документа У/еВ-страница может 
содержать не только текст, но и графику, видео, звуковое сопровождение, может 
реагировать на действия пользователя и т. д. Кроме того, \еБ-страница может быть 
результатом интерпретации сразу нескольких НТМГ-документов. 


Документы в формате HTML имеют расширение html или htm. 


1.1.2. Редактор CKEditor 


Прежде чем изучать язык HTML, советуем установить на компьютер редактор 
CKEditor. Этот редактор написан на языке программирования JavaScript и работает 
в \еБ-браузере. 

Скачать СКЕЧИог можно со страницы https://ckeditor.com/ckeditor-4/download/. 
Выберите полную версию (Full Package) и после закачки и распаковки архива за- 
пустите файл index.html (расположен в папке скедќопђѕатріеѕ\) двойным щелчком JIC- 
вой кнопки мыши на значке файла. Можно также воспользоваться пунктом меню 
Открыть в \еБ-браузере. 


На рис. 1.1 можно увидеть, как выглядит редактор СКЕашот, запущенный в Web- 
браузере Firefox. Если вы раньше работали с текстовым редактором Microsoft Word, 
то большинство кнопок на панели инструментов будет вам знакомо. Принцип рабо- 
ты в CKEditor точно такой же, как и в Word. После ввода текста и его форматиро- 
вания редактор автоматически генерирует НТМГ-код. Посмотреть исходный 
НТМІ.-код можно, нажав кнопку Источник на панели инструментов (рис. 1.2). 


= ЕШ 
СКЕЧКог Sample x + 
б) file:///C:/book/ckeditor_4.7.3_full/ckeditor/samples/inde х OUCK Ү в ға 82 = 
[$ Источник D R В а а & Ф а Е 5-ши ө оо с ав oM 
вт ио 5х ЖТ 19 ШЕ = = Е + S м 
М ОоОШЕФОЕ=Ф 
Стили ~ | Обычное ~ | Шрифт ~ | Размер -|А- В? 


Посмотреть исходный НТМІ -код можно, нажав кнопку Источник на панели инструментов] 


body р 


Рис. 1.1. Редактор CKEditor, запущенный в М/ер-браузере Firefox 
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CKEditor Sample Хх + 


© file:///C:/book/ckeditor_4.7.3_full/ckeditor/samples/inde: x Поис ўї в 4 Ф 5% = 


В Источник D а 


кл о 


<р>Посмотреть исходный НТМГ-код можно, нажав кнопку <зсгопд>Источник</зсгопд> на панели инструментов</р> 


Рис. 1.2. Результат нажатия кнопки Источник в редакторе CKEditor 


Следует заметить, что при изменении исходного НТМГ-кода автоматически изме- 
няется и внешний вид документа. 


1.1.3. Редактор Notepad++ 


Для создания НТМГ-документа можно воспользоваться любым текстовым редак- 
тором, например Блокнотом. Однако мы будем работать с кодировкой UTF-8, а 
Блокнот при сохранении в этой кодировке добавляет метку порядка байтов (от 
англ. Вуе Огаег Магк, ВОМ). Эта метка может стать причиной ошибок при форми- 
ровании заголовков ответа сервера из программы, написанной на языке РНР. Этот 
язык мы будем изучать далее, поэтому в качестве редактора кода на протяжении 
всего обучения воспользуемся программой Notepad++. Она позволяет корректно 
работать как с однобайтовой кодировкой windows-1251, так и с многобайтовой KO- 
дировкой ОТЕ-8, а также имеет подсветку синтаксиса HTML, JavaScript, РНР и др. 


Скачать программу Notepad++ можно абсолютно бесплатно со страницы 
https://notepad-plus-plus.org/. Из двух вариантов (архив и инсталлятор) советуем 
выбрать именно инсталлятор, т. к. при установке можно будет указать язык интер- 
фейса программы. Установка Notepad++ предельно проста и в комментариях не 
нуждается. 


Чтобы открыть какой-либо файл на редактирование, в меню Файл выбираем пункт 
Открыть или щелкаем правой кнопкой мыши на значке файла в Проводнике 
Windows и из контекстного меню выбираем пункт Edit with Notepad++. 


ПРИМЕЧАНИЕ 


Вместо Notepad++ можно воспользоваться редакторами РНР Expert Editor, Aptana 
Studio или NetBeans. Эти редакторы помимо подсветки синтаксиса предоставляют 
множество дополнительных функций. Тем не менее для быстрого редактирования 
файла удобнее пользоваться Notepad++. 
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1.1.4. Первый НТМІ.-документ 


Попробуем создать наш первый НТМГ-документ. Для его создания, как уже отме- 
чалось, можно воспользоваться любым текстовым редактором. Мы же открываем 
редактор Notepad++ и создаем новый документ (меню Файл | Новый). В меню Ko- 
дировки устанавливаем флажок Кодировать в ОТЕ-8 (без ВОМ). Набираем код, 
представленный в листинге 1.1, а затем в меню Файл выбираем пункт Сохранить 
как. В открывшемся окне выбираем папку, например, С2боок, в строке Имя файла 
ВВОДИМ test.html, а из списка Тип файла выбираем пункт АП types (*.*). Нажима- 
ем кнопку Сохранить. После сохранения файла в заголовке окна редактора должен 
появиться путь: C:\book\test.htmi. Если окажется, что после фрагмента htm! стоит 
точка и какое-либо другое расширение, например txt, то при сохранении была 
допущена ошибка. Такая ошибка очень часто возникает при сохранении файла 
в редакторе Блокнот. 


Листинг 1.1. Первый НТМЕ-документ 


<!DOCTYPE html> 

<html lang="ru"> 

<head> 
<meta charset="utf-8"> 
<title>3aroJIOoBOK CTpannypK/title> 

</head> 

<body> 

<р>Привет, мир!</р> 

</body> 

</html> 


Чтобы посмотреть результат, нужно открыть НТМІ.-документ B Web-6paysepe. 
В этом издании книги мы будем пользоваться УУер-браузером Mozilla Firefox (на 
момент подготовки издания текущей была версия 56). Можно пользоваться и дру- 
гим У/еһ-браузером, но процесс работы с другим УҮеһ-браузером будет отличаться, 
и вы станете путаться, не зная, что делать. Поэтому на время обучения установите 
\еб-браузер Mozilla Firefox последней версии, а уже после обучения можете вер- 
нуться к своему любимому \еБ-браузеру. 


Итак, запускаем \еЬ-браузер Mozilla Firefox и переходим в главное меню. Выбира- 
ем пункт Открыть файл, в открывшемся окне находим наш файл test.html и нажи- 
маем кнопку Открыть. Если все сделано правильно, то в окне \!еБ-браузера вы 
увидите надпись «Привет, мир!», а в строке заголовка — надпись «Заголовок стра- 
ницы». Теги в окне \!еБ-браузера не отображаются! 


ПРИМЕЧАНИЕ 


Если в главном меню браузера вы не найдете пункт Открыть файл, то выберите 
пункт Изменить, найдите в левой части открывшегося окна пункт Открыть файл и 
перетащите его с помощью мыши в область меню. Точно таким же способом добавьте 
в меню пункт Кодировка текста. После чего нажмите кнопку Выход из настройки 
для применения изменений. 
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Если МеБ-браузер Firefox является \!еБ-браузером по умолчанию, то открыть 
НТМЕ-документ можно с помощью двойного щелчка левой кнопкой мыши на 
значке файла. Если это не так, то щелкаем правой кнопкой мыши на значке файла и 
из контекстного меню выбираем пункт Открыть с помощью | Выбрать програм- 
му. В открывшемся окне находим \еБ-браузер Mozilla Firefox и устанавливаем 
флажок Использовать это приложение для всех файлов html. Либо в настройках 
\!еБ-браузера делаем его установленным по умолчанию. 


Можно также в адресной строке №Међ-браузера набрать команду Ғі1е:///с:/Боок/ 
test.html и нажать клавишу <Етег>. 


Если вместо русского текста в окне \еЬ-браузера отобразились непонятные симво- 
лы, то следует вначале проверить кодировку файла с НТМІ.-документом. Для этого 
в редакторе Notepad++ отображаем содержимое файла и открываем меню Коди- 
ровки. Флажок должен быть установлен у пункта Кодировать в ОТЕ-8 (без 
ВОМ). Если это не так, то выбираем пункт Преобразовать в ОТЕ-8 (без ВОМ), 
сохраняем файл и пытаемся открыть его снова. 


Если русские буквы все равно отображаются неправильно, то проверяем кодировку 
В следующей строке: 


<meta charset="utf-8"> 


Для совместимости со старыми УҮер-браузерами эту строку можно записать так: 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 


Если опять не помогло, то смотрим какую кодировку выбрал Web-6paysep. Для 
этого открываем главное меню и выбираем пункт Кодировка текста. Флажок дол- 
жен стоять у пункта Юникод. 


Теперь попробуем изменить заголовок в окне МеБ-браузера. Открываем файл 
с НТМГ-документом в программе Notepad++ и изменяем строчку: 


<Е1%1е>Заголовок страницы</+іё1е> 
на: 


<title>Moa первая Мер-страница</41%41е> 


Сохраняем файл (меню Файл | Сохранить), возвращаемся в \\!еБ-браузер и обнов- 
ляем №Меб-страницу. Обновить страницу в Firefox можно следующими способами: 


С нажатием кнопки Обновить текущую страницу в адресной строке; 


O щелчком правой кнопкой мыши на заголовке текущей вкладки и выбором из 
контекстного меню пункта Обновить вкладку; 


П нажатием на клавиатуре комбинации клавиш <Сі1>+<К> или клавиши <Е5>. 
В результате надпись в строке заголовка заменится на «Моя первая \\!еБ-страница». 


Таким образом, изменяя что-либо в исходном коде, можно визуально оценивать 
результаты произведенных действий. Алгоритм такой: открываем исходный код, 
вносим корректировку, сохраняем, а затем обновляем \МеБ-страницу. 
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1.1.5. Просмотр исходного НТМЕ-кода в У/ер-браузере 


Чтобы посмотреть исходный НТМГ-код загруженной \еБ-страницы, следует 
щелкнуть правой кнопкой мыши в любом месте окна \!еБ-браузера и выбрать из 
контекстного меню пункт Исходный код страницы. В некоторых случаях резуль- 
тат этого действия может быть разным. Так, если \МеБ-страница состоит из 
нескольких НТМГ-документов, то от места щелчка зависит, код какого НТМГ- 
документа будет отображен. 


Чтобы посмотреть код только какого-либо фрагмента, достаточно выделить его 
в окне, щелкнуть на выделении правой кнопкой мыши и из контекстного меню 
выбрать пункт Исходный код выделенного фрагмента. 


Исходный НТМГ-код будет отображен на отдельной вкладке, причем его синтаксис 
подсвечивается. Если какой-либо фрагмент подсвечен красным цветом, то в нем 
содержится ошибка, которую нужно исправить. К ошибкам внутри НТМГ-кода 
\!еБ-браузеры часто относятся снисходительно и исправляют их самостоятельно, 
но часто не так, как вам бы этого хотелось. Поэтому обращайте внимание на фраг- 
менты, подсвеченные красным цветом — это подсказка для вас. 


\еб-браузеры запускают код в так называемой «песочнице». Это означает, что код 
внутри У/еВ-страницы не может напрямую взаимодействовать с файловой системой 
компьютера. Сделано это из соображений безопасности. Поэтому, если НТМГ- 
документ опубликован в Интернете, то можно лишь созерцать его исходный код, а 
вот изменить его нельзя. Можно лишь скопировать его и вставить куда-либо или 
сохранить в файл, выбрав из контекстного меню пункт Сохранить как. Последнее 
действие выполняет лично пользователь, а не код внутри \!еБ-страницы, поэтому 
ограничения «песочницы» здесь не действуют. 


1.1.6. Инструменты разработчика 


\еБ-браузер Mozilla Firefox содержит Инструменты разработчика, которые 
позволяют не только просматривать исходный код, но и изменять значения различ- 
ных параметров тегов, атрибутов стиля и т. д. При этом все изменения сразу при- 
меняются в окне УУер-браузера. 


Чтобы открыть панель Инструменты разработчика, нужно в главном меню вы- 
брать пункт Разработка | Инструменты разработчика или нажать комбинацию 
клавиш <Shift>+<Ctr>+<[>. На этой панели сейчас нас интересует вкладка Ин- 
спектор. Поэтому, чтобы отобразить ее сразу, в главном меню выбираем пункт 
Разработка | Инспектор или нажимаем комбинацию клавиш <Shift>+<Ctrl>+<C>. 


По умолчанию панель отобразится в нижней части окна. Это поведение можно из- 
менить с помощью значков в правой части заголовка панели. Например, можно 
отобразить панель в отдельном окне или прикрепить ее к боковой части окна. 
В заголовке окна содержится также значок с изображением шестеренки (пункт На- 
стройки инструментов). Щелчок на нем откроет панель с различными настрой- 
ками. 
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На вкладке Инспектор отображается структура НТМГ-документа в виде дерева 
(рис. 1.3), а на вкладке Разметка можно увидеть блочную структуру каждого эле- 
мента (если вкладка не отображается, то нужно щелкнуть левой кнопкой мыши на 
значке Развернуть панель). При наведении указателя мыши на какой-либо эле- 
мент он подсвечивается в окне №Међ-браузера, что позволяет определить его место- 
положение визуально. Чтобы сразу перейти к элементу внутри НТМГ-кода, щелка- 
ем на значке Выбрать элемент из страницы в заголовке панели, а затем наводим 
указатель мыши на элемент в окне \!еБ-браузера и щелкаем на нем левой кнопкой 
мыши, — строка НТМГ-кода, соответствующая этому элементу, на панели Ин- 
спектор будет выделена. 


ә Инструменты разработчика - Моя первая У/ер-страница - file:///C:/book/test.html =E 
Гв МЕЙ 7474 E] консо СО Отладч () Стил (©, Профай, {È Памя = Се 8 Хранили Е" 9 В = Б 


+ Поиск в HTML ҒАЙ! Правила Вычислено Анимации 
<!DOCTYPE html> сетка 


<html 1апв="ги"> 
МЕ Блочная модель 


Моя первая Мер-страница 


<body> 
</body> 
</html> 


1116x208 static 
Свойства блочной модели 

box-sizing content-box 

display block 

float none 

line-height 20px 

position static 


z-index auto 


Рис. 1.3. Панель Инструменты разработчика в Web-6paysepe Firefox 


Все значения на этой панели можно менять и сразу видеть результат в окне. На- 
пример, изменим текст абзаца. Для этого найдем элемент р и сделаем двойной щел- 
чок левой кнопкой мыши на тексте — текст станет доступен для редактирования. 
Вводим любой другой текст, нажимаем клавишу <Ещег> и любуемся проделанной 
работой в окне У/еВ-браузера. 


Если нужно изменить не только текст элемента, но и поменять НТМГ-код, то щел- 
каем правой кнопкой мыши на элементе и из контекстного меню выбираем пункт 
Править как НТМГ. После этого станет доступным поле, в котором можно про- 
извести изменения. Например, изменим код абзаца следующим образом: 


<р><1>Текст выделен курсивом</1></р> 
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Точно таким же образом можно отобразить в виде текста весь НТМІ.-код. Для это- 
го достаточно щелкнуть правой кнопкой мыши на открывающем теге <html> и из 
контекстного меню выбрать пункт Править как НТМГ.. Чтобы скопировать весь 
код, вначале выделяем его, а затем нажимаем комбинацию клавиш <Сігі>-<С>,-- 
код будет скопирован в буфер обмена, и его можно будет вставить в любое другое 
место — например, сохранить в файл. Аналогичное действие позволяет выполнить 
пункт из контекстного меню Копировать | Внешний HTML. 


Пользоваться панелью Инструменты разработчика мы будем очень часто, 
особенно при изучении языка программирования JavaScript, поэтому способы OTO- 
бражения этой панели нужно знать наизусть. 


1.1.7. Комментарии в НТМЕ-коде 


Текст, заключенный между тегами <!-- и -->, \еБ-браузером не отображается. 
Заметим, что это нестандартная пара тегов, т. к. открывающий тег не имеет закры- 
вающей угловой скобки, а в закрывающем теге отсутствует открывающая угловая 
скобка: 


<!-- Текст комментария --> 


СОВЕТ 


Использование комментариев в исходном коде позволит быстро найти нужный фраг- 
мент. Это особенно важно для начинающих Ү/ер-разработчиков. 


1.2. Структура НТМІ.-документа 


Итак, мы изучили технологию создания НТМГ-документов, научились сохранять, 
отображать и изменять исходный код. Пришла пора вернуться к языку НТМІ.. 
В листинге 1.2 представлена структура, характерная для любого НТМІ.-документа. 


Листинг 1.2. Структура НТМЕ-документа 


<!РОСТУРЕ> <!-- Объявление формата документа --> 
<html> 
<head> 
<!-- Техническая информация о документе --> 
</head> 
<body> 
<!-- Основная часть документа --> 
</body> 
</html> 
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1.2.1. Тег <'РОСТУРЕ>. 
Объявление формата документа 


Тег <!ростүрЕ> позволяет \МеБ-браузеру определить формат файла и правильно OTO- 
бразить все его инструкции. Для НТМІ. 5 инструкция выглядит очень просто: 


<!DOCTYPE html> 
Допустимые форматы для HTML 4.01: 


O strict — строгий формат. Не содержит тегов и параметров, помеченных как 
устаревшие или не одобряемые. Объявление формата: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ЕМ" 
"http://www. w3.org/TR/html4/strict.dtd"> 


П Transitional — переходный формат. Содержит устаревшие теги в целях совмес- 
тимости и упрощения перехода со старых версий HTML. Объявление формата: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.o0org/TR/html4/loose.dtd"> 


С Frameset — аналогичен переходному формату, но содержит также теги для CO3- 
дания фреймов. Обьявление формата: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd"> 


Если тег <!DOCTYPE> не указан, то некоторые №МеБ-браузеры переходят в режим со- 
вместимости. В этом режиме может отличаться тип блочной модели. Поэтому при 
отсутствии тега <!гостүре> разные \еБ-браузеры могут по-разному отображать 
\еб-страницу. 


1.2.2. Тег <һіті> 


Весь текст НТМГ-документа расположен между тегами <html> и </html>. Тег <html> 
может иметь параметры. В большинстве случаев эти параметры универсальные, 
и мы их рассмотрим позже. Сейчас же будем указывать только параметр lang, 
задающий код языка МУеб-страницы: 


<html lang="ru"> 
Значение ru параметра lang означает русский ЯЗЫК. 


НТМІ.-документ состоит из двух разделов: заголовка (между тегами <head> и 
</head>) и содержательной части (между тегами <body> и </body>). 


1.2.3. Раздел HEAD. 
Техническая информация о документе 


Раздел HEAD содержит техническую информацию о странице: заголовок, ее описа- 
ние и ключевые слова для поисковых машин, данные об авторе и времени создания 
страницы, базовом адресе страницы, кодировке и т. д. 
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Единственным обязательным тегом в разделе HEAD является тег <title>. Текст, pac- 
положенный между тегами <title> и </title>, отображается в строке заголовка 
\еб-браузера или в строке заголовка вкладки. Длина заголовка не должна превы- 
шать 60 символов, иначе он полностью не поместится: 


<Е1(1е>Заголовок страницы</бії1е> 


СОВЕТ 


Очень часто текст между тегами <title> и </title> используется в результатах, выда- 
ваемых поисковыми порталами, в качестве текста ссылки на эту страницу. Соответст- 
венно, заголовок должен максимально полно описывать содержание страницы. Не 
следует писать что-то вроде «Главная страница», «Первая страница» ит. п. 


С помощью одинарного тега <песа> можно задать описание содержимого страницы 
и ключевые слова для поисковых машин. Если текст между тегами <title> 
И </title> используется в качестве текста ссылки на эту страницу, то описание из 
тега <meta> может быть отображено под ссылкой: 


<meta name="description" сопіепі="Описание содержимого страницы"> 
<meta паше="Кеумогаз" сопёепі="Ключевые слова через запятую"> 


Также с помощью тега <теса> можно указать кодировку текста: 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
B HTML 5 указать кодировку можно гораздо проше: 


<meta charset="utf-8"> 


Для автоматической перезагрузки страницы через заданный промежуток времени 
следует воспользоваться СВОЙСТВОМ refresh Tera <meta>: 


<meta http-equiv="refresh" content="30"> 


В этом примере страница будет перезагружена через 30 секунд. Если необходимо 
сразу перебросить посетителя на другую страницу, то можно указать ее интернет- 
адрес (URL) в параметре ur1: 


<meta http-equiv="refresh" content="0; url=http://mail.ru/"> 


ПРИМЕЧАНИЕ 


В разделе HEAD могут быть расположены также теги <базе>, <1іпк>, <script>, <style> 
и некоторые другие. Эти теги мы рассмотрим по мере изучения материала. 


1.2.4. Файл favicon.ico 


Когда посетители добавляют сайт в Избранное, \МеБ-браузеры запрашивают с cep- 
вера файл favicon.ico. Этот файл должен содержать логотип сайта в виде значка 
16x16 или 32х32 пиксела. В одном файле может находиться несколько форматов 
значка сразу. Если файл не найден, то в журнал регистрации ошибок сервера запи- 
сывается сообщение об ошибке 404 (файл не найден), а в строке в Избранном ото- 
бражается стандартный значок МеБ-браузера. Если значок найден, то он отобразит- 
ся в Избранном (рис. 1.4) и в заголовке вкладки перед названием М№еб-страницы. 
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4 Яндекс 
С Google 


@ Mail.Ru: почта, поиск в интернете, новости, игры 


Рис. 1.4. Пользовательские значки в Избранном 


Некоторые поисковые порталы (например, Яндекс) отображают значок в результа- 
тах поиска. 


Файл favicon.ico по умолчанию должен находиться в корневой папке сайта и быть 
доступным по адресу һќр://<Имя caŭňra>/favicon.ico. В раздел нкар HTML- 
документа можно добавить следующие строчки, задающие точное местоположение 
значка: 


<link геі-"ісоп" href="/favicon.ico" type="image/x-icon"> 
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> 


Файлы favicon.ico создаются в специализированных редакторах. Дополнительную 
информацию о файле favicon.ico и методах его создания можно получить на сайтах 
http://favicon.ru/ и http://favicon.com/. 


1.2.5. Файл robots.txt 


В некоторых случаях следует запретить индексацию отдельных страниц сайта или 
всего сайта — например, если он предназначен только для членов семьи. Следует 
также учитывать, что поисковые роботы создают большой трафик, т. к. запраши- 
вают все страницы сайта без передышки. Это обстоятельство может значительно 
нагрузить сервер. 


Для управления индексацией конкретной страницы можно воспользоваться тегом 
<песа>: 


<meta папе-"үоросв" сопбепс-"<Индексация>, <Переход по ссылкам>"> 
В параметре content указывается комбинация следующих значений: 
O іпдех-- индексация разрешена; 

О поіпдех — индексация запрещена; 


П follow— разрешено переходить по ссылкам, которые находятся на этой Web- 
странице; 


O nofollow — запрешено переходить по ссылкам; 
О all — комбинация index ПЛЮС follow; 

O none — комбинация поіпдех ПЛЮС nofollow. 
Приведем ряд примеров: 

п индексация и переход по ссылкам разрешены: 


<meta name="robots" сопёепі="іпаех, follow"> 
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O индексация разрешена, а переход по ссылкам запрещен: 


<meta name="robots" сопёепі="іпдӢех, nofollow"> 


o индексация и переход по ссылкам запрещены: 


<meta name="robots" сопёепі="поіпдех, nofollow"> 


Но этот метод не снизит нагрузку на сервер. Чтобы этого добиться, необходимо 
в корневой папке сайта создать файл robots.txt (файл должен быть доступен по адресу 
В@р://<Имя сайта>/гоһо(.іхӨ. Содержимое файла выглядит следующим образом: 
User-agent: * 

Disallow: /file.html 

Disallow: /user/ 


B директиве User-agent можно задать конкретное название робота или указать сим- 
ВОЛ *, который означает, что приведенная информация относится ко всем роботам. 
Узнать название робота МОЖНО ПО ПОЛЮ user-agent В логах сервера. 


Каждая строка Disallow определяет файл или каталог, который запрещен для ин- 
дексации указанным роботом. 


Перед индексацией сайта все роботы обязаны ознакомиться с содержимым этого 
файла. Даже если все страницы сайта разрешены для индексации, все равно следует 
создать пустой файл robots.txt и поместить его в корневой папке сайта, т. к. отсутст- 
вие этого файла приведет к ошибке 404 (файл не найден). Отсутствие файла озна- 
чает, что индексация разрешена. 


Чтобы запретить индексацию всего сайта, необходимо разместить файл со сле- 
дующими директивами: 

User-agent: * 

Disallow: / 


1.2.6. Раздел ВОБУ. Основная часть документа 


В этом разделе располагается все содержимое документа. Большинство тегов, рас- 
смотренных в этой главе книги, должны находиться именно между тегами <роау> И 
</body>. 


Следует отметить, что B HTML 4.01 в формате Strict содержимое тега <body> 
должно быть расположено внутри блочных элементов, например: <p>, <div> 
или др.: 

<р>Текст документа</р> 

<аіу>Текст документа</да1му> 


В HTML 5 этого не требуется, даже теги <html> и <body> являются необязательны- 
ми. Например, следующий НТМГ-документ является валидным (однако так лучше 
не делать!): 


<!DOCTYPE html> 
<head> 
<title>3aroJIOBOK страницы</біё1е> 
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<meta charset="utf-8"> 
</head> 
Привет, мир! 


В HTML 4.01 в формате Transitional тег <body> имеет параметры bgcolor (задает 
цвет фона УУер-страницы), background (позволяет задать фоновый рисунок для до- 
кумента), а1іпк (определяет цвет активной ссылки), link (устанавливает цвет еше 
не просмотренных ссылок), vlink (определяет цвет уже просмотренных ссылок), 
text (устанавливает цвет текста) и др. В HTML 5 все эти параметры отсутствуют. 
Вместо них следует пользоваться стилями CSS (листинг 1.3). 


Листинг 1.3. Тег <body> 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<title>3aroJIOoBOK CTpannypK/title> 
<style> 
body { 
/* Цвет фона Мер-страницы */ 


background-color: green; 
/% Фоновый рисунок */ 
background-image: url (рһоёо.јрд); 


/% Цвет текста */ 
color: red 


/* Цвет еше не просмотренных ссылок */ 
a:link { color: #0000ЕЕ } 
/* Цвет уже просмотренных ссылок */ 
a:visited { color: #008000 } 
/* Цвет активной ссылки */ 
a:active { color: #FF0000 } 
</style> 

</head> 

<body> 

<р>Текст документа</р> 


<p><a href="https://www.google.ru/">TeKkcT ссылки</а></р> 
</body> 
</html> 


В этом примере мы воспользовались парным тегом <style> и внутри него добавили 
различные стили как для тега <body>, так и для тега <a>. Более подробно CSS стили 
мы рассмотрим в следующей главе. 


У тега <body> существуют и другие параметры, которые мы будем рассматривать по 
мере изучения языка. 


Основы НТМІ. 5. Создаем дизайн сайта 37 


1.3. Разделение У/еһ-страницы на фрагменты 


Элементы УҮеВ-страницы бывают блочными и строчными. Блочный элемент зани- 
мает всю ширину родительского элемента. Строчный элемент может быть распо- 
ложен только внутри блочного элемента. С помощью блочных элементов мы 
можем разделить \МеБ-страницу на логические фрагменты — например, выполнить 
форматирование текста с помощью заголовков и абзацев. 


1.3.1. Заголовки 


Заголовки могут иметь шесть различных размеров: 
<Һһх>Заголовок</Һһх> 

где х — число от 1 до 6. 

Заголовок с номером 1 является самым крупным: 
<Һ1>Самый крупный заголовок</Һ1> 

Заголовок с номером 6 является самым мелким: 


<Һ6>Самый мелкий заголовок</Һһ6> 


В HTML 4.01 в формате Transitional Теги <һх> имеют параметр align, с помощью 
которого можно управлять горизонтальным выравниванием текста внутри заголов- 
ка. В НТМЕ 5 этого параметра нет, вместо него нужно использовать атрибут стиля 
text-align: 


<Һ1 style="text-align: center">TekcT по центру</һ1> 


В этом примере мы воспользовались параметром style, который имеют почти все 
теги. 


1.3.2. Разделение на абзацы 


Тег <р> позволяет разделить текст на отдельные абзацы. При этом перед абзацем И 
после него добавляется пустое пространство: 


<Һ1>Заголовок</Һ1> 

<р>Абзац с выравниванием по левому краю</р> 

<р зіуіе-"бехі-а114п: сепіег">Абзац с выравниванием по центру</р> 
<р style="text-align: јиѕііҒу">Абзац с выравниванием по ширине</р> 


Закрывающий тег </р> не обязателен, поэтому и такой код является валидным: 


<Һһ1>Заголовок</Һ1> 
<р>Абзац 1 
<р>Абзац 2 
<р>Абзац 3 


В этом случае концом абзаца считается следующий открывающий тег <р> или 
любой другой блочный элемент. 
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Парный тег <blockquote> создает абзац с длинной цитатой. Его блок будет иметь 
меньшую ширину, чем обычный абзац, и выравнивание по центру. 


<Біоскачосе>Длинная цитата</Біоскапове> 


Тег <blockquote> может содержать параметр cite, задаюший ссылку на страницу 
с оригинальным текстом. 


1.3.3. Тег <div> 


Тег <div> является универсальным блочным элементом. С его помощью можно 
сгруппировать несколько элементов страницы в один и применить к группе 
различные стили. Кроме того, тег <div> используется для блочной верстки Web- 
страницы (листинг 1.4). 


Листинг 1.4. Тег <div> 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<title>9zemeHT DIV</title> 
</head> 
<body> 
<div id="header"> 
<h1>&quot;Manka&quot; страницы</ћ1> 
</div> 
<div id="nav"> 
<p><a href="page2.html">CrTpamnya 2</а></р> 
<p><a href="page3.html">CrTpamnya 3</а></р> 
</div> 


<div id="main"> 

<р>Основное содержимое страницы</р> 

</div> 

<div id="footer"> 

<p>&quot; ogBaJI&quot; страницы</р> 
</div> 

</body> 

</html> 


1.3.4. Семантическая разметка B HTML 5 


Итак, в листинге 1.4 мы создали блочную верстку с помощью тегов <div>. Каждый 
тег содержит параметр id, задающий уникальный идентификатор элемента. Этот 
параметр имеют практически все теги. Благодаря этому параметру мы можем обра- 
титься к элементу из программы на JavaScript или применить к элементу стили. 


усновы M I IVIL ә. хозоаем оизаин саипа Jy 


Давайте посмотрим на первый элемент: 
<div іа="Һеааег"> 


<h1>&quot;llanka&quot; страницы</Һ1> 
</div> 


По значению параметра id человек догадается о предназначении элемента, а вот 
поисковый робот видит только безликий элемент div и не догадывается о его пред- 
назначении. Чтобы это исправить, в HTML 5 были добавлены средства семантиче- 
ской разметки страниц. Под семантической разметкой подразумевается разделе- 
ние содержимого страницы на части, каждая из которых имеет особое значение: 
заголовок страницы, панель навигации, основное содержимое, часть основного со- 
держимого, «подвал» и др. 


Перепишем предыдущий пример: 


<header> 
<h1>&quot;llanka&quot; страницы</Һ1> 
</header> 


Мы заменили безликий элемент div блочным элементом header, имеющим опреде- 
ленный смысл. Теперь поисковый робот знает, с чем имеет дело, и сможет пра- 
вильно обработать содержимое элемента. 


Для семантической разметки в НТМІ, 5 предусмотрены следующие блочные теги: 
С <һеадег> — «шапка» статьи или самой страницы; 


O <пау>-- набор гиперссылок для навигации по содержимому статьи или самому 
сайту (панель навигации); 


С <паіп>-- блок основного содержимого ‘страницы; 
П <footer> — «подвал»-статьи или самой страницы; 


С <зесеіоп>-- значимая часть материала (например, раздел документа). Раздел 
должен содержать заголовок: 


П <аггісіе>--- независимый-и самодостаточный фрагмент основного содержимого 
страницы: ‘отдельная статья, запись форума, блога или комментарий; 


С <азіде>--- примечание к статье, обычно располагающееся сбоку от основного 
текста; 


С <figure> — иллюстрация к статье: обычное графическое изображение, аудио-, 
видеоролик или даже фрагмент текста; 


С <Ғіссарсіоп>-- подпись к иллюстрации. Может присутствовать только в теге 
<figure>. 


С помощью строчного тега <mark> можно пометить важный фрагмент текста. Web- 
браузер Firefox устанавливает для такого фрагмента желтый цвет фона (как бы вы- 
деляет фрагмент текста маркером). 


Пример использования семантической разметки приведен в листинге 1.5. 
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Листинг 1.5. Семантическая разметка 


<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<title>CemantTnueckas pasmerTka</title> 
</head> 
<body> 
<header> 
<h1>&quot;Manka&quot; страницы</ћ1> 
</header> 
<nav> 
<p><a href="page2.html">CrTpamnya 2</а></р> 
<p><a href="page3.html">CrTpamnya 3</а></р> 
</nav> 
<section> 
<Һ2>Заголовок раздела</Һһ2> 
<р>Основное содержимое</р> 
<article> 
<Һ3>Заголовок статьи</Һ3> 
<р>Текст статьи. 
<тасК>Важный фрагмент текста</пагк> 
</р> 
<figure> 
<p><img src="photo.jpg" alt=""></p> 
<Ғісдсарёіоп>Иллюстрация</ідсарііоп> 
</figure> 
<aside> 
<р>Примечание K статье</р> 
</авіде> 
</article> 
</section> 
<footer> 
<p>&quot; Подвал&аџоїб; страницы</р> 
</footer> 
</body> 
</html> 


\!еБ-браузеры сейчас никак не выделяют визуально блочные теги семантической 
разметки. Однако мы всегда сможем привязать к ним стили, чтобы задать нужное 
нам оформление (о стилях будет рассказано в главе 2). 


Чтобы старые версии \!еБ-браузеров правильно отображали новые элементы, нуж- 
но объявить их блочными с помощью атрибута стиля display: 

<style type="text/css"> 

main { display: block } 

</style> 
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Для браузера Internet Explorer следует дополнительно создать элемент: 


<script type="text/javascript"> 
document .createElement ("main"); 


</script> 


1.3.5. Ter <details> 


Тег <details> в HTML 5 позволяет скрыть или отобразить какой-либо фрагмент 
страницы. По умолчанию содержимое элемента скрыто. Чтобы отобразить содер- 
жимое, нужно щелкнуть левой кнопкой мыши на заголовке, реализуемом с по- 
мощью тега <summary>, или добавить параметр open. Чтобы опять скрыть содержи- 
мое, нужно повторно щелкнуть мышью на заголовке: 


<details ореп> 
<зоппагу>Развернуть или свернуть</зиттаку> 
<р>Скрытый текст</р> 

</details> 


Оба этих Tera поддерживаются браузерами Chrome версии 12+, Opera версии 15+, 
Safari версии 6+ и Firefox версии 49+. Браузеры Internet Explorer и Microsoft Edge 
тег <details> не поддерживают. 


1.3.6. Горизонтальная линия 


Одинарный тег <hr> позволяет провести горизонтальную линию. По умолчанию 
линия занимает почти всю ширину родительского элемента и выравнивается по 


центру. 


В HTML 4.01 в формате Transitional тег <hr> имеет параметры size (толщина 
линии), width (длина линии), align (выравнивание линии) и noshade (присутствие 
этого параметра отменяет рельефность линии). В НТМЕ 5 этих параметров нет, 
вместо них нужно использовать стили: 


<р>Со значениями по умолчанию</р> 
<hr> 

<р>Высота 5 px, ширина 90 процентов, с рамкой</р> 

<hr style="height: 5px; width: 90%"> 

<р>Ширина 200 px, с выравниванием по правой стороне</р> 
<hr style="width: 200px; margin: 0 0 0 auto"> 

<р>Высота 5 px, ширина 200 px, без рамки, 

с выравниванием по центру, красный цвет фона</р> 


Л 


hr style="height: 5px; width: 200px; border: 0; background: red"> 


1.4. Форматирование текста 


Как уже говорилось, НТМГ, — это язык разметки. Следовательно, важно уметь 
форматировать отдельные символы, а также целые фрагменты текста. Форматиро- 
вание текста внутри блока выполняется строчными тегами. 
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1.4.1. НТМЕ-эквиваленты 


Прежде чем изучать теги, рассмотрим возможность отображения специальных 
символов. Такими символами, например, являются знаки меньше (<) и больше (>), 
т. к. с помощью этих символов описываются НТМГ-теги. Для отображения специ- 
альных символов используются так называемые НТМІ-эквиваленты. Например, 
для вывода такого текста: 


Текст между тегами <title> и </title> используется в результатах, 


выдаваемых поисковым порталом. 


необходимо написать так: 


Текст между тегами &lt;titlesgt; и &lt;/title&gt; используется 


в результатах, выдаваемых поисковым порталом. 


В этом примере мы заменили знак меньше (<) на в1<;, а знак больше (>) — на &gt;. 
Приведем наиболее часто используемые НТМГ-эквиваленты: 


П хе; — знак меньше (<); 

О agt; — знак больше (>); 

O samp; — амперсанд (в); 

С «пьвр; -- неразрывный пробел; 

O вало; -- кавычка ("); 

П &сору; — знак авторских прав (©); 

С sreg; — знак зарегистрированной торговой марки (®); 
С зегаае; — торговая марка (ТМ). 


1.4.2. Перевод строки 


Для разделения строк используется одинарный тег <br>. 
Если в НТМГ-документе набрать текст: 


<р>Строка1 
Строка2 
Строка3</р> 


то \!еБ-браузер отобразит его в одну строку: строка! Строка? Строказ. Для того 
чтобы строки располагались друг под другом, необходимо добавить тег <br> В KO- 
нец каждой строки: 


<р>Строка1<рг> 
Строка2<рг> 
Строка3</р> 


Заметьте, что символ переноса строки в предыдущем результате был заменен сим- 
волом пробела. Аналогичная ситуация будет, если внутри НТМГ-кода идут 
несколько пробельных символов подряд, — все они преобразуются М№Меб-браузером 
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в один пробел. Если нужно отобразить несколько пробелов подряд, то следует вос- 
пользоваться комбинацией &nbsp; : 


<р>Пункт1<рг> 
&прзр; &nbsp; &прэр;Пункт1 1<рг> 


&nbsp; &прѕр; &прѕр;Пункт1 2</р> 


Результат в окне УУер-браузера: 


Пункт1 


ункт1 1 


ункт1 2 


Для вывода текста в том же виде, что и в исходном коде, можно воспользоваться 
парным блочным тегом <pre>: 


<pre> 
Пункт1 


ункт1 1 


ункт1 2 
</рге> 


В этом примере строки также будут располагаться друг под другом, и пробелы 
будут сохранены, но текст выведется моноширинным шрифтом. 


1.4.3. Выделение фрагментов текста 
Тег <b> отображает текст полужирным шрифтом: 
<р>Полужирный шрифт</р> 


Вместо тега <b> можно использовать тег логического форматирования <strong>, 
который определяет важный фрагмент текста: 


<ѕігопд>Важный фрагмент TekcTa</strong> 
Тег <і> отображает текст курсивом: 


<1>Текст, выделенный курсивом</1> 


Вместо тега <і> можно использовать тег логического форматирования <ет>, С ПО- 
мошью которого делается акцент на выделенном фрагменте: 


<еп>Текст, выделенный курсивом</ет> 


Тег <u> отображает текст подчеркнутым: 


<чЧ>Подчеркнутый текст</и> 


Тег <s> отображает текст перечеркнутым: 


<5>Перечеркнутый текст</$> 


Отметить фрагмент текста как удаленный позволяет парный тег <ае1>. Текст ото- 
бражается перечеркнутым. Тег <del> имеет следующие параметры: 


О cite — задает ссылку на страницу с описанием причины удаления; 


О datetime — дата и время удаления. 
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Текст, вставленный вместо удаленного, отмечается тегом <ins>. Текст отображает- 
ся подчеркнутым: 


<ае1>старый текст</4е1> <іпѕ>новый текст</іпѕ> 
Для вывода текста шрифтом меньшего размера применяется парный тег <вта11>: 


Текст <ѕта11>меньшего</зюа11> размера 


1.4.4. Теги логического форматирования 


Теги, рассмотренные в предыдущем разделе, в основном являются тегами физиче- 
ского форматирования. Исключение составляют теги <strong> и <em>. Эти теги AB- 
ляются тегами логического форматирования текста и служат для выделения очень 
важных и просто важных фрагментов соответственно. Теги логического формати- 
рования используются для структурной разметки документа и могут отображаться 
разными УҮер-браузерами по-разному. Приведем основные теги логического pop- 
матирования: 


О <сісе>...</сіге>-- применяется для отметки цитат, а также названий произве- 
дений; 


<соде>...</соде>-- служит для отметки фрагментов программного кода; 
<abbr>. . .</abbr> — используется для отметки аббревиатур; 


<kbd>. . .</kbd> — отмечает фрагмент как вводимый пользователем с клавиатуры; 


ооо 


<а>...</а> — используется для отметки коротких цитат. Фрагмент отображается 
в кавычках; 


О <запр>...</зашр> — применяется для отметки результата, выдаваемого про- 
граммой; 


О <var>...</var> — отмечает имена переменных; 


С <dfn>...</dfn> — служит для выделения нового термина (текст отображается 
курсивом). 


В НТМІ. 5 доступны также следующие теги: 


П <mark>...</mark> — помечает важный фрагмент текста. Браузер Firefox устанав- 
ливает для такого фрагмента желтый цвет фона (как бы выделяет фрагмент тек- 
ста маркером); 


С <time>. ..</time> — дата и время. Может включать параметр datetime, указы- 
вающий дату и время в формате: 


<год>-<месяц>-<число> <часы>:<минуты> 


1.4.5. Создание нижних и верхних индексов 


Тег <sub> сдвигает текст ниже уровня строки и уменьшает размер шрифта. Он ис- 
пользуется для создания нижних индексов: 


Формула воды H<sub>2</sub>0 
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Тег <sup> сдвигает текст выше уровня строки и уменьшает размер шрифта. Этот тег 
используется чаще всего для создания степеней: 


Единица измерения площади — M<sup>2</sup> 


1.4.6. Тег <span> 


Тег <span> является универсальным строчным элементом, к которому можно при- 
крепить различные стили. Пример использования тега <span> приведен в листин- 
ге 1.6. 


Листинг 1.6. Тег <span> 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<Е1Е1е>Элемент SPAN</title> 
<style type="text/css"> 
span { /% Стиль для всех элементов SPAN */ 


font-size: 12рі; /% Размер шрифта */ 
color: blue; /* Цвет шрифта */ 
font-family: "Arial"; /* Название шрифта */ 
font-weight: bold; /* Жирность шрифта */ 
} 
</style> 
</head> 
<body> 
<p> 


С помошью элемента <span>SPAN</span> можно отформатировать 
<span style="color: геа">фрагмент</врап> внутри абзаца. 
</р> 
</body> 
</html> 


1.5. Списки 


Список — это набор упорядоченных абзацев текста, помеченных специальными 
значками (маркированные списки) или цифрами (нумерованные списки). Рассмот- 
рим каждый из вариантов в отдельности. 


1.5.1. Маркированные списки 


Маркированный список помещают внутри парного тега <ul>. Перед каждым пунк- 
том списка необходимо поместить тег <11>. Закрывающий тег </11> не обязателен. 
В листинге 1.7 представлена структура маркированного списка. 
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Листинг 1.7. Маркированный список 


<ul> 
<11>Первый пункт</11> 
<11>Второй пункт</11> 
</ul> 


B HTML 4.01 в формате Transitional тег <ul> имеет параметр type, позволяю- 
щий задать значок, которым помечаются строки списка. B HTML 5 параметра нет. 
Вместо него нужно использовать стили: 


<ul style="1list-style-type: circle"> 
<11>Первый пункт</11> 
<11>Второй пункт</11> 

</ul> 


1.5.2. Нумерованные списки 


Нумерованный список помешают внутри парного тега <о1>. Перед каждым пунк- 
том списка необходимо поместить тег <li>. Закрывающий тег </li> не обязателен. 


В листинге 1.8 показана структура нумерованного списка. 


Листинг 1.8. Нумерованный список 


<о1> 
<11>Первый пункт</11> 
<11>Второй пункт</11> 
</о1> 


В HTML 5 тег <о1> имеет три параметра. Первый из них — type — позволяет задать 
формат, которым нумеруются пункты списка. 


Параметр может принимать следующие значения: 
O А— пункты нумеруются прописными латинскими буквами: 


<о1 type="A"> 
<11>Первый пункт</11> 
<11>Второй пункт</11> 
</о1> 


O a— пункты нумеруются строчными латинскими буквами: 


<о1 ёуре="а"> 
<11>Первый пункт</11> 
<11>Второй пункт</11> 
</о1> 
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С т — пункты нумеруются прописными римскими цифрами: 


<о1 Журе-"І"> 
<11>Первый пункт</11> 
<11>Второй пункт</11> 
</о1> 


С : — пункты нумеруются строчными римскими цифрами: 
<ol Еуре="1"> 
<11>Первый пункт</11> 
<11>Второй пункт</11> 
</о1> 


С 1 — пункты нумеруются арабскими цифрами (по умолчанию): 


<о1 type="1"> 
<11>Первый пункт</11> 
<11>Второй пункт</11> 
</о1> 


Второй параметр тега <ol> — start — задает номер, с которого будет начинаться 
нумерация пунктов: 
<о1 ёуре="1" start="5"> 
<11>Первый пункт</11> 
<11>Второй пункт</11> 
</о1> 


Тег <li> также имеет параметр value, который позволяет изменить номер указанно- 
го элемента списка: 


<о1> 
<11>Первый пункт</11> 
<li уа1ае="5">Второй пункт</11> 
<11>Третий пункт</11> 

</о1> 


В этом примере Первый пункт будет иметь номер 1, Второй пункт -- номер 5, 
а Третий пункт — номер 6. 


В HTML 5 тег <о1> имеет третий параметр — reversed — задающий обратный по- 
рядок нумерации: 


<01 геуегзеа> 
<11>Первый пункт</11> 
<11>Второй пункт</11> 
</о1> 


В этом примере Первый пункт будет иметь номер 2, а Второй пункт — номер 1. 


Параметр reversed не поддерживается браузером Internet Explorer. 
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1.5.3. Списки определений 


Списки определений состоят из пар «термин/определение». Описываются они с по- 
мощью парного тега <а1>. Для вставки термина применяется тег <dt>, а для вставки 
определения — тег <аа>. Закрывающие теги </а-> и </аа> не обязательны. Пример 
использования списков определений приведен в листинге 1.9. 


Листинг 1.9. Списки определений 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 

<meta charset="utf-8"> 

<title>Cnnuckn определений</Е1Е1е> 
</head> 
<body> 

<а1> 

<dt>HTML (HyperText Markup Language)</dt> 
<dd> 
Язык разметки документа, описываюший форму отображения 


информации на экране компьютера 
</аа> 
<dt>CSS (Cascading Style Sheets)</dt> 
<аа>Каскадные таблицы стилей</аа> 
</а1> 
</body> 
</html> 


1.6. Графика 


Применение графики делает М№еб-страницу визуально привлекательнее, т. K. H30- 
бражения помогают лучше передать суть и содержание документа. В Интернете 
применяются следующие графические форматы: 


С GIF — использует только 256 цветов и поддерживает прозрачность. Кроме того, 
СІЕ-файл может содержать анимацию; 


С JPEG — метод сжатия фотографий с потерей качества. Прозрачность и анима- 
ция не поддерживаются; 


С РМС — формат хранения графики, использующий сжатие без потерь. Поддер- 
живает прозрачность. Разрабатывался в качестве замены формата GIF. 


1.6.1. Изображение на У/еһ-странице 


Изображения вставляются в У/еВ-страницы с помощью одинарного тега <img>. Сам 
тег <img> должен быть расположен внутри блочного тега, например: <p>, <div> 
или др. 
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Тег имеет следующие параметры: 
П -ус-- І/КІ.-адрес файла графического изображения: 


<img src="foto.gif" а1\{="Текст подсказки"> 
<img src="http://www.mysite.ru/foto.gif" а1%-"Текст подсказки"> 


О alt — строка текста, которая будет выводиться на месте появления изображения 
до его загрузки или при отключенной графике, а также если изображение загру- 
зить не удалось: 


<img src="foto.gif" а1\{="Текст подсказки"> 


O чае — ширина изображения в пикселах: 
<img src="foto.gif" width="480" а1Е="Текст подсказки"> 


o height — высота изображения в пикселах: 


<img src="foto.gif" width="480" height="60" а1{="Подсказка"> 


ПРИМЕЧАНИЕ 


Значения параметров width и height могут не соответствовать реальным размерам 
изображения. В этом случае \\еБ-браузер выполнит перемасштабирование. Если 3Ha- 
чение одного из параметров указать неправильно, то изображение будет искажено. 
Если указать только один параметр, то значение второго будет рассчитано пропор- 
ционально значению первого, исходя из реальных размеров изображения. 


СовеТ 


Всегда указывайте значения параметров width и height, т.к. это позволит Web- 
браузеру отформатировать \\еБ-страницу до загрузки изображений. В противном слу- 
чае загрузка каждого изображения приведет к необходимости произвести форматиро- 
вание еще раз, что в свою очередь приведет к перемещению других элементов Web- 
страницы. В результате картинка в окне У/ер-браузера будет дергаться. 


Следующие параметры доступны только в HTML 5 (браузер Internet Explorer их не 
поддерживает): 


О srcset — задает список изображений в формате: 


<Путь> [<Ширина>м] [<Плотность пикселов>х][, ...] 


После пути к изображению должна быть указана ширина или плотность пиксе- 
лов устройства (по умолчанию 1х). Учитывая эти параметры, \!еБ-браузер вы- 
бирает подходящее изображение из списка. Иными словами, для каждого разме- 
ра экрана мы можем указать разные изображения (например, отличающиеся 
размерами); 


П sizes — задает размеры изображения для разных размеров страницы. В качестве 
единиц измерения могут быть заданы em, ех, ch, гет, үч (ширина в процентах), vh 
(высота в процентах), үшіп, утах, ст, mm, а, іп, рс, ре, рх (пикселы). В качестве 
значения можно использовать медиазапросы (см. разд. 2.24). 
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Пример использования параметров srcset И sizes: 
<img src="img_large.jpg" а1%-"Подсказка" 


srcset="img_small.jpg 500w, img medium.jpg 750w, img 1акде.1ра 1000w" 
sizes="100vw" style="max-width: 100%"> 


Если ширина экрана окажется меньше или равна 500 рх, будет использовано H30- 
бражение img small.jpg, если меньше или равна 750 рх-- img medium. jpg, B про- 
тивном случае-- img Іагде.јро. Если \еБ-браузер не поддерживает параметры 
srcset И sizes, То будет использоваться изображение, указанное в параметре src. 


1.6.2. Изображение в качестве фона 


В HTML 4.01 в формате Transitional тег <body> имеет параметры background (по- 
зволяет задать фоновый рисунок для документа) и bgcolor (цвет фона). В параметре 
bgcolor следует указывать цвет, близкий к цвету фонового изображения, т. к. рез- 
кий переход, например, от светлого тона к темному вызовет неприятное мелька- 
ние, — ведь фоновое изображение может загрузиться с некоторой задержкой. 


В НТМІ. 5 эти параметры отсутствуют, вместо них следует использовать стили: 


<body style="background: gray игі(Ғойео.41ҰҒ) гереаі"> 


1.6.3. Ter <picture> 


B HTML 5 был добавлен парный Ter <picture>, внутри которого с помошью тега 
<source> можно задать различные изображения для разных размеров экрана. 


Тег <зовгсе> имеет следующие параметры: 
П srcset — задает список изображений в формате: 


<Путь> [<Ширина>ми] [<Плотность пикселов>х][, ...] 


После пути к изображению должна быть указана ширина или плотность пиксе- 
лов устройства (по умолчанию 1х). Учитывая эти параметры, \еб-браузер 
выбирает подходящее изображение из списка. Иными словами, для каждого 
размера экрана мы можем указать разные изображения (например, отличающие- 
ся размерами); 


П sizes — задает размеры изображения для разных размеров страницы. В качестве 
единиц измерения могут быть заданы em, ех, ch, гет, vw (ширина в процентах), vh 
(высота в процентах), vmin, утах, cm, mm, а, іп, рс, pt, рх (пикселы); 


С media — позволяет указать медиазапросы (см. разд. 2.24). 
Пример: 


<picture style="max-width: 100%"> 

<source sizes="100vw" 

srcset="img_small.jpg 500w, img medium.jpg 750w, img 1агде.јро 1000w"> 
<img src="img_large.jpg" а1%-"Подсказка"> 

</picture> 
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Если \!еБ-браузер не поддерживает тег <picture>, то будет отображено изображе- 
ние, указанное в параметре src тега <img>. 


1.6.4. ЗУС-графика 


В НТМЕ 5 помимо растровых изображений можно загрузить и отобразить изобра- 
жение в формате SVG. Это векторный формат, описывающий изображение как 
набор примитивов: прямых, кривых, многоугольников и др. (полный список при- 
митивов и их подробное описание смотрите на странице https://www.w3.org/ 
ТВ/$УС/). Векторные изображения масштабируются без потери качества, а формат 
SVG, кроме того, поддерживает создание анимированных изображений и даже HH- 
терактивной графики, откликающейся на действия пользователя. 


Изображения в формате SVG могут быть вставлены на страницу с помощью тега 
<img>, но лучше для этого использовать тег <рісечге> и внутри него с помощью тега 
<img> задать альтернативное изображение в растровом формате для У/ер-браузеров, 
не поддерживающих формат ЗУС: 


<рісілге> 

<source srcset="img.svg"> 

<img src="photo.jpg" а16-"Подсказка"> 
</picture> 


Содержимое файла img.svg: 


<?xml уегѕіоп="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtq"> 
<svg width="12cm" height="4cm" viewBox="0 0 1200 400" 
xmlns="http://www.w3.org/2000/svg" version="1.1"> 
<rect x="1" y="1" width="1198" height="398" 
fill="none" stroke="red" stroke-width="2" /> 
<rect x="400" y="100" width="200" height="200" rx="50" 
fill="green" stroke="þblack" stroke-width="5" /> 
<circle cx="200" cy="200" r="100" fill="red" /> 
<polygon fill="yellow" ѕігоке="р1Іпе" stroke-width="3" 
points="850,75 958,137.5 958,262.5 
850,325 742,262.6 742,137.5" /> 


</зуа> 


В HTML 5 существует также тег <svg>, с помощью которого можно формировать 
векторное изображение прямо в НТМІ -документе: 


<svg width="12cm" height="4cm" у1емВох="0 0 1200 400" 
xmlns="http://www.w3.org/2000/svg" version="1.1"> 
<circle cx="200" cy="200" r="100" fill="red" /> 
</svg> 
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1.6.5. Тег <сапуа> 


В НТМЕ 5 появилась поддержка программного рисования произвольной растровой 
графики на холсте. Холст создается с помощью парного тега <сапуаѕ>, имеющего 
следующие параметры: 


О за — ширина холста; 
О height — высота холста. 
Пример: 


<сапуаѕ 19="спу" width="400" height="300"> 
<р>Ваш Мер-браузер не поддерживает элемент сапуаз</р> 


</саруаз> 


Если параметры не указаны, то создается холст с размерами 300х150 пикселов. 


ПРИМЕЧАНИЕ 
Подробнее о программном рисовании на холсте будет рассказано в главе 3. 


1.7. Гиперссылки 


Гиперссылки позволяют нажатием кнопки мыши быстро перемещаться от одного 
документа к другому. Именно гиперссылки связывают все \еб-страницы Интерне- 
та в единую сеть. 


1.7.1. Внешние гиперссылки 


Внешние гиперссылки вставляются в НТМІ -документ с помощью тега <a>. Сам тег 
<а> должен быть расположен внутри блочного тега, например: <р>, <4іч> или др. 


Основным параметром тега <a> является href. Именно этот параметр задает URL- 
адрес \еБ-страницы, которая будет загружена при щелчке мыши на указателе. 
В качестве указателя может быть текст: 


<a href="http://www.mysite.ru/file.html">TekcT ссылки</а> 


ИЛИ изображение: 


<a href="http://www.mysite.ru/file.html1"> 
<img src="foto.gif" а\{="Подсказка"></а> 


Кроме НТМІ-документов, можно ссылаться и на файлы других типов — например, 
изображения, архивы и т. д. По умолчанию выполняется переход по ссылке, и со- 
держимое документа загружается в окно \!еБ-браузера. Если невозможно отобра- 
зить документ в окне, то \еБ-браузер предложит сохранить файл. В HTML 5 тег 
<a> имеет параметр download, который говорит \Меб-браузеру, что документ нужно 
скачать, а не открыть. В качестве значения параметр download может содержать 
предлагаемое имя файла для сохранения. МІМЕ-тип документа следует указать 
в параметре type: 
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<a һгеЁ="Ғобо.діЁ">Открыть</а> 

<a href="foto.gif" download ёбуре="імаде/9і#">Скачать</а> 

<a href="foto.gif" download="test.gif" type="image/gif"> 
Скачать и сохранить под названием test.gif</a> 


Если ОВГ-адрес содержит символ в, то его необходимо заменить НТМГ-экви- 
валентом ватр;: 


<a Һгеғ="іпаех.рһр?іа=5&атпр; пате-МіКк">Текст ссылки</а> 


ОВГ-адреса бывают абсолютными и относительными. 


Абсолютный ОВІ -адрес 


Абсолютный ОКІ -адрес содержит обозначение протокола, доменный или ІР-адрес 
компьютера, путь к файлу, а также имя файла: 


http://www.mysite.ru/folder/file.html 


Если файл находится в корневой папке, то путь может отсутствовать: 


http://www.mysite.ru/file.html 


Имя файла также может отсутствовать. В этом случае загружается УУер-страница, 
заданная по умолчанию в настройках УУер-сервера (чаще всего іпдех.һіті или 
іпдех.рһр): 

http://www.mysite.ru/ 

http://www.mysite.ru/folder/ 


Относительный URL-agpec 


При относительном задании ОКГ-адреса путь определяется с учетом местоположе- 
ния У/еВ-страницы, на которой находится ссылка. Возможны следующие варианты: 


С если нужная \еБ-страница находится в той же папке, что и \е-страница, co- 
держащая ссылку, то І/КІ.-адрес может содержать только имя файла. Если 
с Меб-страницы, находящейся по адресу http://www.mysite.ru/folder1/folder2/ 
Ше1.һіпі, нужно перейти на \МеБ-страницу http://www.mysite.ru/folder1/ 
folder2/file2.html, то ссылка будет такой: 


<a href="file2.html">TekcT ссылки</а> 
П если с УУеВ-страницы, находящейся по адресу http://www.mysite.ru/folder1/ 


folder2/file1.html, нужно перейти на У/ер-страницу http://www.mysite.ru/ 
folder1/folder2/folder3/file2.html, то ссылку можно указать так: 


<a href="folder3/file2.html">TekcT ссылки</а> 


П если с УУеВ-страницы, находящейся по адресу http://www.mysite.ru/folder1/ 
folder2/file1.html, нужно перейти на У/ер-страницу http://www.mysite.ru/ 
folder1/file2.html, то ссылка будет такой: 


<a href="../file2.html">TekcT ссылки</а> 


о г лава 1 


А при переходе с http://www.mysite.ru/folder1/folder2/folder3/file1.html на 
http:/www.mysite.ru/folder1/file2.html — такой: 


<a href="../../file2.html">TekcT ссылки</а> 


П если в разделе HEAD присутствует тег <разе> с параметром href, то все относи- 
тельные ссылки разрешаются от указанного в параметре значения, а не от теку- 
щего местоположения страницы: 


<раѕе href="http://www.mysite.ru/folder1/"> 


П если первым символом в пути указан символ /, то путь определяется относи- 
тельно корня сайта. 


Очень часто необходимо загрузить документ в новую вкладку, а не в текушую. Для 
этого в параметре target тега <a> следует указать значение _blank: 


<a href="http://www.mysite.ru/file.html" сагсдес-" р1апк">Ссылка</а> 


Если нужно, чтобы все ссылки открывались на новой вкладке, то в раздел HEAD 
нужно добавить следующий код: 


<Базе target="_blank"> 


Другие значения параметра target мы рассмотрим при изучении фреймов 
(см. разд. 1.9.2). 


1.7.2. Внутренние гиперссылки 


С помощью внутренних гиперссылок можно создать ссылки на разные разделы 
текущей УҮеБ-страницы. -Если: документ “очень большой, то наличие внутренних 
гиперссылок позволяет быстро перемещаться между разделами. 


Внутренняя`гииерссылка-также вставляется при помощи тега <a> с одним различи- 
ем — параметр һгегсодержит имя «якоря», ане ОКІ-адрес. Перед именем «якоря» 
ставится знак-#: 


<a ҺгеЁ="#сһарёег1">Глава 1</а> 
Также можно сослаться на «якорь» другого документа. Это делается так: 


<a href="http://www.mysite.ru/file.html#chapter1">Tekct</a> 


«Якорь» создается с помощью параметра 1а, задаюшего уникальный идентифика- 
тор элемента. Этот параметр имеют практически все теги. 


Структура документа с внутренними ссылками приведена в листинге 1.10. 


Листинг 1.10. Структура документа с внутренними ссылками 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 


Основы HTML 5. Создаем дизайн сайта 55 


<Е1Е1е>Создание внутренних ссылок</&1Е1е> 
<style type="text/css"> 
p { margin-bottom: 150px } 
</style> 
</head> 
<body> 
<һ1>Название документа</Һ1> 
<Һ2>Оглавление</Һһ2> 
<ul> 
<li><a href="#chapter1">Iasa 1</а> 
<li><a ҺгеЁ="#сһаріег2">Глава 2</а> 
<li><a һгеҒ-"Фсһарбек3">Глава 3</а> 
<li><a ҺгеЁ="#сһаріег4">Глава 4</а> 
</ul> 
<h2 іа="сһарёег1">Глава 1</h2> 
<р>Содержание главы 1</p> 
<h2 іа="сһарёег2">Глава 2</Һ2> 
<р>Содержание главы 2</р> 
<Һ2 іа="сһаріег3">Глава 3</Һ2> 
<р>Содержание главы 3</р> 
<Һ2 іа="сһаріег4">Глава 4</Һ2> 
<р>Содержание главы 4</р> 
</body> 
</html> 


1.7.3. Гиперссылки на адрес электронной почты 


Ссылка на адрес электронной почты выглядит так: 


<a href="mailto:mail@mysite.ru">TekctT</a> 


Вместо (/КІГ.-адреса указывается адрес электронной почты, перед которым добавля- 
ется слово mailto:. 


СОВЕТ 


Не следует публиковать ссылку с адресом электронной почты на сайте. Такие ссылки 
автоматически собираются роботами, и в дальнейшем этот Е-тай будет завален спа- 
МОМ. 


1.8. Таблицы 


В НТМІ -документе таблицы используются в следующих случаях: 
С как средство представления данных; 


8 как элемент оформления страницы, с помощью которого можно точно размес- 
тить на странице текст и графику. 


Начнем со структуры, описывающей таблицу (листинг 1.11). 
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Листинг 1.11. Структура НТМЕ-таблиц 


<!DOCTYPE 


html> 


<html lang="ru"> 


<head> 
<meta 


charset="utf-8"> 


<title>CrTpykTypa HTML-Taðzmy</title> 


<style 
table 


type="text/css"> 
{ 


width: 300px; 


border: black 1px solid; 


border-spacing: 0; 


border-collapse: collapse; /* 


margin: 0 auto 0 auto 


} 


caption { 


text-align: center; 


caption-side: top 


} 
са, th 


border: black 1px solid; 


{ 


padding: 10px; 


tex 


t-align: center 


t-align: center; 
tical-align: top; 


tr:nth-child(2n) { 


bac 


} 
thead, 
bac 


} 


kground: Же8е8е8 


tfoot { 
kground: #Е5е0са 


</style> 


</head> 
<body> 


<table> 
<сарііоп>Заголовок таблицы</сарііоп> 
<thead> 
<г> 
<ЕБ>Столбец 1</th> 
<ЕБ>Столбец 2</th> 
</tr> 
</thead> 
<tbody> 


/ж 
/ж 


/ж 


Ширина таблицы */ 

Стиль рамки таблицы */ 

Расстояние между ячейками */ 
Одинарная рамка */ 

Выравнивание таблицы по центру */ 


Выравнивание заголовка по центру */ 
Вывод заголовка над таблицей */ 


Стиль рамки ячеек */ 


/ж Отступ между границей и содержимым */ 


/ж 


/ж 
/ж 


/ж 


Выравнивание ячейки по центру */ 


Горизонтальное выравнивание */ 
Вертикальное выравнивание */ 


Зебра */ 


Цвет фона */ 


Основы HTML 5. Создаем дизайн сайта 57 


<tr> 
<Е9>Ячейка 1</ға> 
<Еа>Ячейка 2</td> 
</tr> 
<tr> 
<Е9>Ячейка 3</ға> 
<Е9>Ячейка 4</td> 
</tr> 
</tbody> 
<tfoot> 
<tr> 
<ЕҺһ>Итого 1</th> 
<ЕҺ>Итого 2</th> 
</Ех> 
</tfoot> 
</table> 
</body> 
</html> 


Эта структура описывает таблицу 2X2 с заголовком, заголовками столбцов и стро- 
кой итогов. Значения в ячейках выровнены по центру. Все ячейки таблицы прону- 
мерованы от І до 4. 


Таблица вставляется в НТМГ-документ с помощью парного тега <table>. Отдель- 
ная ячейка таблицы описывается тегом <td>, а ряд ячеек — с помощью тега <tr>. 
Ячейка заголовка описывается с помощью тега <th>. Тег <caption> позволяет задать 
заголовок таблицы. 


Для логического форматирования таблицы предназначены теги <thead>, <tbody> И 
<tfoot>. Ter <thead> описывает заголовок столбцов таблицы, тег <tbody> — ОСНОВ- 
ное содержимое таблицы, а тег <tfoot> — «подвал» таблицы. 


Закрываюшие теги </thead>, </tbody>, </tfoot>, </td>, </th> H </tr> не обязательны. 


1.8.1. Вставка таблицы B документ 


В HTML 4.01 тег <table> имеет параметры border (управляет отображением линий 
сетки таблицы, а также задает толшину рамки вокруг таблицы. По умолчанию сет- 
ка не отображается), се11ѕрасіпо (задает толщину линий сетки внутри таблицы, 
точнее сказать, расстояние между рамками соседних ячеек), cellpadding (указывает 
размер отступа между рамкой ячейки и данными внутри ячейки), width (определяет 
ширину таблицы), align (задает выравнивание таблицы, а также обтекание таблицы 
текстом) и bgcolor (указывает цвет фона таблицы). 


В НТМІ. 5 этих параметров нет, вместо них следует использовать стили: 


table { 
width: 300px; /* Ширина таблицы 
(вместо параметра width) */ 
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border: black 1px solid; /% Стиль рамки таблицы 
(вместо параметра border) */ 
рогаег-зрасіпд: 0; /ж Расстояние между ячейками 
(вместо параметра се11зрасіпа) */ 
border-collapse: collapse; /% Одинарная рамка */ 
margin: 0 auto 0 auto /% Выравнивание таблицы по центру 
(вместо параметра align) */ 


} 


ха, &Ь { 
border: black 1px solid; /% Стиль рамки ячеек */ 
padding: 10px; /* Отступ между границей и содержимым 


(вместо параметра cellpadding) */ 


1.8.2. Заголовок таблицы 


Тег <caption> позволяет задать заголовок таблицы. В HTML 4.01 в формате 
Transitional Тег <caption> имеет параметр align, задающий положение заголовка. 
В НТМІ. 5 этого параметра нет, вместо него следует использовать стили: 


caption { 
text-align: center; /% Выравнивание заголовка по центру */ 
caption-side: top /* Вывод заголовка над таблицей */ 


) 


Атрибут стиля сарЕ1оп-з1ае (замена параметра align) может принимать следующие 
значения: 


С сор — заголовок помещается над таблицей (значение по умолчанию); 


П bottom — заголовок располагается под таблицей. 


1.8.3. Строки таблицы 


Строки таблицы описываются с помощью парного тега <tr>. Закрывающий тег не 
обязателен. В HTML 4.01 тег <tr> имеет параметры align (горизонтальное вырав- 
нивание текста в ячейках таблицы), valign (вертикальное выравнивание текста 
в ячейках таблицы) и bgcolor (цвет фона ячеек таблицы). В HTML 5 этих парамет- 
ров нет, вместо них следует использовать стили: 


ЕЕ 
text-align: center; /* Горизонтальное выравнивание */ 
vertical-align: top; /* Вертикальное выравнивание */ 


} 


Чтобы таблица лучше читалась, цвет фона соседних строк нужно сделать отли- 
чающимся. Выполнить такое чередование позволяет следующее правило стиля: 


ЕгіпЕҺ-сҺ110(2п,) { 
background: #е8е8е8 /* Зебра */ 
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1.8.4. Столбцы таблицы 


По умолчанию таблица отображается только после полной загрузки. Если нужно 
отображать данные построчно, то следует задать характеристики столбцов с по- 
мощью тегов <со1> (описывает один столбец) и <colgroup> (описывает группу 
столбцов). Теги имеют параметр span, который задает число колонок. 


Характеристики колонок в НТМІ, 5 задаются с помощью стилей: 


<table> 
<colgroup style="þbackground: #Е5е0са"> 
<col style="width: 300px"> 
<col style="width: 100px"> 
</colgroup> 
<tr> 
<td>fueňka 1</+а><ёа>Ячейка 2</td> 
</tr> 
<tr> 
<td>fueňka 3</+а><іа>Ячейка 4</td> 
</tr> 
</table> 


1.8.5. Ячейки таблицы 


Ячейки таблицы описываются с помощью тегов <td> (обычная ячейка) и <th> 
(ячейка заголовка — содержимое таких ячеек выделяется полужирным шрифтом 
и выравнивается по центру). Закрывающие теги не обязательны. 


Теги <td> и <th> имеют следующие параметры: 
П со15рап — задает количество объединяемых ячеек по горизонтали; 
П rowspan — указывает количество объединяемых ячеек по вертикали. 


В качестве примера объединим горизонтально расположенные ячейки в одну (лис- 
тинг 1.12). 


Листинг 1.12. Обьединение ячеек по горизонтали 


<table> 
<tr> 
<td со1ѕрап="2">Ячейки 1 и 2 обьединены</ға> 
</tr> 
<Ег> 
<са>Ячейка 3</ға> 
<Еа>Ячейка 4</%а> 
</tr> 
</table> 


Теперь объединим вертикально расположенные ячейки | и 3 в одну (листинг 1.13). 
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Листинг 1.13. Обьединение ячеек по вертикали 


<table> 
“Су 
<td гомзрап="2">Ячейки 1 и 3 обьединены</ға> 
<Еа>Ячейка 2</ға> 
</tr> 
<tr> 
<td>fueňka 4</ға> 
</tr> 
</table> 


Если для ячейки нет значения, то вместо значения следует вставить неразрывный 
пробел: 


<td>&nbsp; </td> 


1.9. Фреймы 


Фреймы позволяют разбить окно Web-6paysepa на несколько прямоугольных 
областей, в каждую из которых можно загрузить отдельный НТМГ-документ. 


В HTML 4.01 в формате Frameset поддерживаются теги <Ғгашезес>, <frame> И 
<noframes>. В HTML 5 эти теги отсутствуют, вместо них нужно использовать тег 
<iframe>. 


1.9.1. Ter <iframe>. 
Добавление фрейма B обычный документ 


Вставлять фреймы в обычный НТМІ.-документ можно с помошью парного тега 
<iframe> . Иногда такие фреймы называют «плавающими». 
Тег <iframe> имеет следующие параметры: 


O src— определяет ОВГ-адрес документа, который должен быть загружен во 
фрейм. Может быть указан абсолютный или относительный ОКІ -адрес: 


<iframe src="chapter1.html"></iframe> 


П name — задает уникальное имя фрейма: 


<iframe src="chapter1.html" name="myframe"></iframe> 
p y 


O width n height — задают ширину и высоту фрейма соответственно: 


<iframe src="chapter1.html" name="myframe" width="700" 
height="400"></iframe> 


B HTML 5 добавлены следующие параметры: 


П srcdoc — позволяет задать НТМІ.-код, который отобразится во фрейме (не под- 
держивается браузером Internet Explorer): 


<iframe ѕгсаос="<р>Текст внутри фрейма"></1Ёгаше> 
р р р 
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С sandbox — устанавливает ограничения на содержимое, загружаемое во фрейм. 
Если параметр указан без значения, то устанавливается максимальный режим 
ограничения. Можно снять отдельные ограничения, указав следующие значения 
через пробел: 


e allow-forms — разрешает отправку форм; 
e allow-modals — разрешает открытие модальных диалоговых окон; 
e allow-popups — разрешает всплывающие окна; 


e allow-scripts — разрешает выполнение скриптов (исключая всплывающие 
окна); 


èe allow-top-navigation — разрешает загружать документы по ссылкам в роди- 
тельский документ; 


e 211о%-зале-огідіп-- разрешает документу внутри фрейма из того же источ- 
ника доступ к родительскому документу; 


е allow-pointer-lock — разрешает Pointer Lock АРІ; 


® allow-presentation — разрешает Presentation АРІ; 


èe allow-orientation-lock — разрешает Screen Orientation АРІ. 


Попробуем создать \МеБ-страницу с плавающим фреймом. Для этого создадим 
в одной папке три файла: 


С сһаріегі .һіті (листинг 1.14) — содержание главы 1; 
С спарег2.ит! (листинг 1.15) — содержание главы 2; 


П index.html (листинг 1.16) — НТМГ-документ с плавающим фреймом. 


Листинг 1.14. Содержимое файла сһареег1.һіті 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<title>Iuasa 1</title> 
</head> 
<body> 
<Һ1>Глава 1</h1> 
<р>Содержание главы 1</p> 
</body> 
</html> 


Листинг 1.15. Содержимое файла сһареег2.һіті 


<!DOCTYPE html> 
<html lang="ru"> 


62 Гпава 1 


<head> 
<meta charset="utf-8"> 
<Е1Е1е>Глава 2</title> 
</head> 
<body> 
<Һ1>Глава 2</h1> 
<р>Содержание главы 2</p> 
</body> 
</html> 


Листинг 1.16. Применение плаваюших фреймов 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<title>llpmmenenne плавающих ppeňmos</title> 
</head> 
<body> 
<Һ1>Название документа</Һ1> 
<Һ2>Оглавление</Һһ2> 
<ul> 
<li><a href="chapter1.html1" сагсдее-"сһарбек">Глава 1</а></11> 
<li><a href="chapter2.html1" багдеі="сһарёег">Глава 2</а></11> 
</ul> 
<iframe src="chapter1.html" name="chapter" width="700" 
height="400"></iframe> 


</body> 
</html1> 


Откроем B Web-6paysepe файл index.html. При переходе по ссылкам соответствую- 
шая страница загружается в окно фрейма, а заголовок и панель навигации остаются 
в неизменном состоянии. 


ПРИМЕЧАНИЕ 


При использовании фреймов следует учитывать, что поисковые машины при индекса- 
ции сайтов заносят в свои базы именно отдельные страницы структуры фреймов, а не 
саму структуру. Это обстоятельство полностью разрушает всю структуру сайта. Ведь 
если панель навигации расположена на одной странице, а основная часть страниць 
на другой, то при переходе посетителя с поискового портала он попадает сразу на ос- 
новную часть, а панель навигации остается ему не доступна. 


1.9.2. Загрузка документа в определенный фрейм 


Для загрузки документа в определенный фрейм существует параметр target тега 
<a>. В параметре target указывается имя фрейма (которое задается с помощью 
параметра name тега <iframe>) или одно из зарезервированных значений: 
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С _blank — документ будет загружен в новую вкладку (если в теге <iframe> указан 
параметр sandbox и не заданы значения а11ои-ѕате-огідіп И а11ом-рорирз, ТО 
ссылка работать не будет): 


<a href="filel.html" target="_blank">TekcT ссылки</а> 
С _self — документ будет загружен в тот же фрейм (или вкладку), где находится 


гиперссылка (если в теге <iframe> указан параметр sandbox и не задано значение 
allow-same-origin, ТО ссылка работать не будет): 


<a href="filel.html" жагдее-" ве1Е">Текст ссылки</а> 
п _рагепї — документ будет загружен в окне, являющемся родительским по от- 
ношению к текущему фрейму (если в теге <iframe> указан параметр sandbox и не 


заданы значения а11ом-заще-ог191п И allow-top-navigation, ТО ссылка работать 
не будет): 


<a href="filel.html" багдеё=" рагепі">Текст ссылки</а> 


С «ор-- документ будет загружен поверх всех фреймов (если в теге <iframe> ука- 
зан параметр sandbox и не заданы значения а11ом-запе-огідіп И allow-top- 
navigation, ТО ссылка работать не будет): 


<a href="filel.html" жагдее-" ёор">Текст ссылки</а> 


Если нужно загрузить документ во фрейм с именем chapter, то ссылка будет такой: 


<a href="chapter1.html" жагдее-"сһарбек">Глава 1</а> 


Имя фрейма задается с помощью параметра папе тега <iframe>: 


<iframe src="chapter1l.html" name="chapter" width="700" 
height="400"></iframe> 


1.10. Карты-изображения 


С помощью карт-изображений можно создать очень красивую панель навигации. 
В качестве ссылок на разделы сайта будут служить области на обычном изображе- 
нии формата GIF, JPEG или PNG. 


К минусам такого подхода можно отнести: 
С \еБ-браузеры не смогут выделять другим цветом уже пройденные ссылки; 


п поскольку вместо текстовых ссылок используются изображения, это приведет 
к увеличению времени загрузки страницы; 


O пользователи могут отключить использование графики и по этой причине не 
увидят панель навигации. 


1.10.1. Карта-изображение как панель навигации 


Давайте перепишем файл іпдех.һіті (мы использовали его при изучении плавающих 
фреймов в листинге 1.16) и заменим текстовую панель навигации на карту- 
изображение (листинг 1.17). 
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Листинг 1.17. Применение карт-изображений 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<title>llpmmenenne карт-изображений</бії1е> 
</head> 
<body> 
<Һ1>Название документа</һ1> 
<Һ2>Оглавление</Һһ2> 
<p><img src="foto.gif" а16-"Подсказка" width="240" height="120" 
usemap="#karta" style="border: black 2px solid"> 


<map name="karta"> 
<area shape="rect" coords="0,0,120,120" href="chapter1.html" 


target="chapter" а14-"Глава 1" 41%1е-"Глава 1"> 
<area shape="rect" coords="120,0,240,120" href="chapter2.htm1" 
target="chapter" а1{="Глава 2" 41%1е-"Глава 2"> 
</map></p> 
<iframe src="chapter1.html" name="chapter" width="700" 


height="400"></iframe> 
</body> 
</html> 


Нас сейчас не интересует само изображение, поэтому его может B папке и не быть. 
Чтобы видеть границы изображения на \еБ-странице, мы добавили атрибут стиля 
border в параметре style. Сохраним файл и обновим У/еВ-страницу. 


Итак, как и в предыдущем примере, у нас есть заголовок и окно фрейма, но вместо 
текстовой панели навигации имеется изображение 240х120 (в нашем примере пока- 
зана только его рамка). Изображение виртуально разделено пополам на левую и 
правую части. Если навести курсор мыши на правую часть изображения, то форма 
курсора даст понять, что это ссылка, а рядом с курсором появится всплывающая 
подсказка Глава 2 (значение параметра title). При переходе по ссылке файл 
chapter2.html загружается в окно фрейма. Если щелкнуть на левой части изобра- 
жения, то во фрейм опять вернется текст глава 1. 


1.10.2. Структура карт-изображений 


Рассмотрим структуру, которая позволяет вставить карту-изображение в HTML- 
документ (листинг 1.18). 


Листинг 1.18. Структура карт-изображений 


<!-- Часть 1 --> 
<img src="foto.gif" а1{="Подсказка" width="240" height="120" 
usemap="#karta" style="border: black 2px solid"> 
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<!-- Часть 1 --> 
<!-- Часть 2 --> 
<шар name="karta"> 
<area shape="rect" соога5="0,0,120,120" href="chapter1.html" 
target="chapter" а1%4-"Глава 1" ёіёІе="Глава 1"> 
<area shape="rect" coords="120,0,240,120" href="chapter2.html1" 
target="chapter" а1%4-"Глава 2" ёіёІе="Глава 2"> 


</map> 
<!-- Часть 2 --> 


Как видим, код для вставки карты-изображения состоит из двух частей: 


П первая часть с помощью тега <img> вставляет изображение в \\!еБ-страницу. Па- 
раметр usemap указывает, что изображение является картой. В качестве значения 
параметра указывается ОКІ-адрес описания конфигурации. Если описание kap- 
ты расположено в том же НТМГ-документе, то указывается название раздела 
конфигурации карты, перед которым добавляется символ #; 


П вторая часть, являющаяся описанием конфигурации карты, расположена между 
тегами <map> И </тар>. Активная область карты описывается с помощью тега 
<агеа>. Сколько на карте активных областей, столько и тегов <агеа> должно 
быть. 


1.10.3. Тег <тар> 


Парный тег <map> служит для описания конфигурации областей карты- 
изображения. У тега <map> есть единственный параметр — name. Значение парамет- 
ра name должно соответствовать имени в параметре usemap тега <img>. 


1.10.4. Описание активной области 
на карте-изображении 


Тег <агеа> описывает одну активную область на карте. Закрывающий тег не требу- 
ется. Если одна активная область перекрывает другую, то будет реализована первая 
ссылка из списка областей. 


Тег <агеа> имеет следующие параметры: 

O shape — задает форму активной области. Он может принимать 4 значения: 
® rect — активная область в форме прямоугольника (по умолчанию); 
e circle — активная область в форме круга; 
e ро1у— активная область в форме многоугольника; 


e default — активная область занимает всю площадь изображения: 


<area shape="default" а1%-"Подсказка" 
href="chapter0.html1"> 
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П coords — определяет координаты точек отдельной активной области. Координа- 
ты указываются относительно левого верхнего угла изображения и задаются 
следующим образом: 


® ДЛЯ области типа rect задаются координаты верхнего левого и правого ниж- 
него углов прямоугольника (координаты указываются через запятую): 


соогав-"х1, yl, x2, y2" 


Здесь х1 И у1 — координаты левого верхнего угла, а х2 и у2-- координаты 
правого нижнего угла, например: 


<area shape="rect" соогаѕ="0, 0,120,120" alt="" 
href="chapter1.html1"> 


е для области типа circle указываются координаты центра круга и радиус: 


соогав-"х1, yl, r" 


Здесь x1 и уі — координаты центра круга, a г — радиус круга, например: 


<area shape="circle" соогаѕ="60, 60,30" alt="" 
href="chapter1.html1"> 


® ДЛЯ области типа poly перечисляются координаты вершин многоугольника 
в нужном порядке: 


соогав-"х1, у1, х2, у2, х3, уЗ" 


Здесь х1, у1, х2, у2, хз, уз — координаты вершин многоугольника (в данном 
случае — треугольника). Можно задавать и большее количество вершин — 
иными словами, можно описать активную область практически любой фор- 
мы. Координаты последней вершины не обязательно должны совпадать 
с первой: 
<area ѕһаре="ро1у" соогаѕ="10, 100, 60,10, 100,100" 

аіс-"" href="chapter1.html"> 


П href — указывает ОКІ -адрес ссылки. Может быть указан абсолютный или OTHO- 
сительный адрес ссылки: 


<area ѕһаре="сігс1е" соогаѕ="60, 60,30" alt="" 
href="chapter1.html1"> 


O alt — задает альтернативный текст (с помощью параметра title можно задать 
текст всплывающей подсказки при наведении курсора мыши на активную об- 
ласть): 


<area shape="rect" соога5="0,0,120,120" href="chapter1.html]" 
target="chapter" а1{="Глава 1" ёіё1е="Глава 1"> 


С target — указывает, куда будет загружен документ при переходе по ссылке. 
Может быть указано имя фрейма или одно из зарезервированных значений: 
blank, self, parent ИЛИ «ор. Эти значения рассматривались нами при изуче- 
нии фреймов (см. разд. 1.9.2). 
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1.11. Формы 


Формы предназначены для пересылки данных от пользователя к УҮер-серверу. 
О том, как обрабатывать эти данные на стороне сервера, будет рассказано при 
изучении языка РНР. А пока рассмотрим возможности НТМІ, для создания форм. 


1.11.1. Создание формы для регистрации сайта 


Создадим форму регистрации сайтов в каталоге ресурсов Интернета. Откроем 
Notepad++ и наберем код, приведенный в листинге 1.19. 


Листинг 1.19. Пример использования форм 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<title>llpmmep использования þopm</title> 
</head> 
<body> 
<һ1>Пример формы регистрации сайта</Һһ1> 
<form action="file.php" method="POST" enctype="multipart/form-data"> 
<div> 
Логин: <br> 
<input type="text" name="login"><br> 
Пароль :<Юрг> 
<input type="password" name="passw" уа]1ае="Пароль"><фг> 
ОВТ-адрес сайта:<рг> 
<input type="text" name="url" value="http://" size="20"><br> 
Название caňrtTa:<br> 
<input type="text" name="name _site" size="20"><þr> 
Описание сайта:<Бк> 


<textarea name="descr" гомз="10" cols="15"></textarea><br> 

Тема сайта:<рг> 

<select name="theme"> 
<option value="0" selected>Tema не выбрана</оріёіоп> 
<option value="1">Temal</option> 


<option value="2">Tema2</option> 
<option value="3">Tema3</option> 
</select><br> 
Баннер 88*31:<br> 
<input type="file" name="þanner" size="20"><br><br> 
<input type="reset" уа1ае="Очистить"> 
<input type="submit" уа1ае="Отправить"> 
</div> 
</form> 
</body> 
</html> 
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Сохраним файл под именем Тогт.һіті и откроем его в \МеБ-браузере — в окне Web- 
браузера будет отображена форма, состоящая из пяти текстовых полей: Логин, 
Пароль, ОВТГ-адрес сайта, Название сайта и Описание сайта, списка значений 
(Тема сайта), поля выбора файла с кнопкой Обзор (под надписью Баннер 88*31:), 
а также двух кнопок: Очистить и Отправить. 


Кнопка Очистить возвращает все значения формы к первоначальным. Кнопка От- 
править позволяет отправить данные, введенные пользователем, расположенной 
на \МеБ-сервере программе, ОКІ-адрес которой указан в параметре action тега 
<Ғоуш> (в нашем случае это Е11е.рьр). Программа обработает данные и либо доба- 
вит сайт в каталог и выдаст подтверждение об успешной регистрации, либо выдаст 
сообщение об ошибке, если обязательное поле не заполнено или заполнено непра- 
вильно. В нашем случае программы обработки нет, и отправка данных формы ни 
к чему не приведет — точнее, приведет к ошибке «Файл не найден». 


1.11.2. Структура документа с формами 


Форма добавляется в НТМІ-документ при помощи парного тега <form>. Внутри 
тегов <form> И </form> могут располагаться теги <input>, <Еехкагеа> И <зе1есЪ>, 
вставляющие в форму элементы управления: 


<form action="file.php"> 
<input type="text"> 
<textarea></textarea> 
<select> 
<option></option> 
</select> 

<input type="file"> 


<input type="reset"> 
<input type="submit"> 
</form> 


Рассмотрим эти теги подробно. 


1.11.3. Добавление формы в документ 


Парный тег <form> позволяет добавить форму в НТМГ-документ. Тег имеет сле- 
дующие параметры: 


С action— задает ОКІ-адрес программы обработки формы. Может задаваться 
в абсолютной или относительной форме: 


<form action="file.php"> 


С method — определяет, как будут пересылаться данные из формы \еБ-серверу. 
Может принимать два значения: СЕТ и POST: 


е сЕТ-- данные формы пересылаются путем их добавления к ОВГ-адресу 
после знака ? в формате: 


[Имя параметра]= [Значение параметра] 
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Пары параметр=значение отделяются друг от друга символом амперсанда (s): 


http://www.mysite.ru/file.php?login=Login&passw=Password 


Все специальные символы, а также буквы, отличные от латинских (например, 
буквы русского языка), кодируются в формате snn, а пробел заменяется зна- 
ком +. 


В теге <form> значение СЕТ ДЛЯ параметра method задается так: 


<form action="http://www.mysite.ru/file.php" method="GET"> 


Метод GET применяется, когда объем пересылаемых данных невелик, т. K. CY- 
ществует предел длины ОКГ-адреса; 


èe POST— предназначен для пересылки данных большого объема, файлов и 
конфиденциальной информации (например, паролей): 


<form action="http://www.mysite.ru/file.php" method="POST"> 


o enctype — задает способ кодирования передаваемых данных. Может принимать 
два значения: 


Ф application/x-www-form-urlencoded — применяется по умолчанию: 


<form action="http://www.mysite.ru/file.php" method="POST" 
enctype="application/x-www-form-urlencoded"> 


ө multipart/form-data — указывается при пересылке УУер-серверу файлов: 


<form action="http://www.mysite.ru/file.php" method="POST" 
enctype="multipart/form-data"> 


П пате--задает имя формы: 


<form action="file.php" пате="Ғогтм1"> 


С target — указывает, куда будет помещен документ, являющийся результатом 
обработки данных формы \еБ-сервером. Параметр может содержать имя фрей- 
ма или одно из зарезервированных значений: blank, top, self ИЛИ рагепе: 


<form action="http://www.mysite.ru/file.php" method="POST" 
enctype="multipart/form-data" target="_blank"> 


Эти значения рассматривались нами при изучении фреймов. 
В HTML 5 тег <form> получил поддержку двух новых параметров: 


п autocomplete — включает или отключает автодополнение значений, занесенных 
в поля ввода формы. Значение оп включает автодополнение, off — отключает; 


С novalidate — если присутствует, то значения, занесенные в поля ввода, не будут 
проверяться: 


<form action="process.php" autocomplete="off" поуа11дағе> 
</form> 


Браузер Safari этот параметр не поддерживает. 
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1.11.4. Тег <іприі> 


Тег <input> Позволяет вставить в форму элементы управления, например: текстовое 
поле, кнопку или флажок. Этот тег имеет следующие параметры: 


П суре — задает тип элемента. В зависимости от значения этого поля создаются 
следующие элементы формы: 


text — текстовое поле ввода: 


<input type="text"> 


password — Текстовое поле для ввода пароля, в котором все вводимые симво- 
лы заменяются звездочками: 


<input Еуре="раззмога"> 


file — поле ввода имени файла с кнопкой Обзор. Позволяет отправить файл 
на У/ер-сервер: 


<input type="file"> 


checkbox — поле для установки флажка, который можно установить или 
сбросить: 


<input type="checkbox"> 
radio — элемент-переключатель (иногда их называют радиокнопками): 
<input type="radio"> 


reset — кнопка, при нажатии которой ВСЯ форма очищается. Точнее сказать, 
все элементы формы получают значения по умолчанию: 


<input type="reset" уа1ае="Очистить"> 
p УР 


submit — кнопка, при нажатии которой происходит отправка данных, BBE- 
денных в форму: 


<input type="submit" уа]1ае="Отправить"> 


button — обычная командная кнопка: 


<input type="button" уа1ае="ОК" 
onclick="alert ('OK')"> 


Такую кнопку имеет смысл использовать только с прикрепленным к ней 
скриптом. Как это сделать, будет показано в главе 3; 


image — Изображение, при щелчке на котором выполняется отправка данных 
формы. При этом отправляются также и координаты щелчка мыши на изо- 
бражении. Путь к файлу с изображением указывается в параметре src, а в па- 
раметре alt задается альтернативный текст: 


<input Журе-"ішаде" src="button.gif" а1%-"Отправить"> 


hidden — скрытый элемент, значение которого отправляется вместе со всеми 
данными формы. Элемент не показывается пользователю, но позволяет хра- 
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нить, например, данные из предыдушей формы (если пользователь последо- 
вательно заполняет несколько форм) или уникальное имя пользователя: 


<input type="hidden" name="user_id" value="1"> 


С name — задает имя элемента управления. Оно должно обязательно указываться 
латинскими буквами (например, field) или комбинацией латинских букв и цифр 
(например, field1). Имя элемента не должно начинаться с цифры: 


<input type="text" name="field1"> 


П disabled — запрещает доступ к элементу формы. При наличии параметра эле- 
мент отображается серым цветом: 


<input type="text" name="field2" disabled> 


o readonly — указывает, что элемент доступен только для чтения. При наличии 
параметра значение элемента изменить нельзя: 


<input type="text" 
уа1ае="Значение только для чтения" readonly> 


O value — задает значение по умолчанию для элементов и текст надписи для кно- 
ПОК: 


<input type="text" уа1џе="Значение по умолчанию"> 
<input type="submit" уа1ае="Отправить"> 


B HTML 5 добавлены следующие элементы (значения параметра type): 


O url — поле ввода ОВГ-адреса. Значение автоматически проверяется. Форма oT- 
правляется только в случае, если поле не заполнено или содержит корректное 
значение ОКГ-адреса. Существование ОВГ-адреса не проверяется. Если нужно 
исключить пустое значение, то следует дополнительно указать параметр 


required: 
<input type="url" required> 


С email — поле ввода адреса электронной почты. Значение автоматически прове- 
ряется. Форма отправляется только в случае, если поле не заполнено или содер- 
жит корректное значение E-mail. Существование E-mail не проверяется. Если 
нужно исключить пустое значение, то следует дополнительно указать параметр 


required: 
<input type="email" required> 

П tel — поле для ввода телефона. Значение автоматически не проверяется, т. к. 
форматы номеров сильно различаются. Мобильные У/еһ-браузеры для этого 


поля могут отобразить специальную клавиатуру. В остальных УҮер-браузерах 
элемент выглядит как обычное текстовое поле: 


<input type="tel" рІасеһо1дег="+0 (000) 000-00-00"> 


O number — поле для ввода числа. Справа от поля УУер-браузер отображает две 
кнопки, с помощью которых можно увеличить или уменьшить значение на шаг, 
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указанный в параметре step. Мобильные УУеВ-браузеры для этого поля отобра- 
жают цифровую клавиатуру. Значение автоматически проверяется. Форма 
отправляется только в случае, если поле не заполнено или содержит положи- 
тельное или отрицательное число. Если нужно исключить пустое значение, то 
следует дополнительно указать параметр required: 


<input type="number" step="5" required> 
<input type="number" step="0.5" required> 


range — ползунок, с помощью которого можно выбрать числовое значение из 
диапазона. К сожалению, элемент не содержит маркеров и меток, поэтому 
выставить значение можно только примерно. Для информирования пользователя 
о точном текущем значении нужно использовать дополнительные скрипты. Ми- 
нимальное значение задается параметром min, максимальное — параметром max, 
текущее — параметром value, а шаг — параметром step: 


<input Журе-"тапде" піп-"0" пах-"100" value="10"> 
color — инструмент для выбора цвета. При щелчке на элементе отображается 
диалоговое окно (рис. 1.5), в котором можно выбрать цвет или ввести его значе- 


ние вручную. Элемент не поддерживается браузером Internet Explorer. Текущее 
значение задается с помощью параметра value в формате #ввссвв: 


<input type="color" value="#FF0000"> 


Цвет 


Основные цвета: 

иг ашгаар 

ipang m8 E и 
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иное 

8В888888. 
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Дополнительные цвета: 

= ы m ш ш Ы Е m Оттенок: 0 Красный: 255 

нинннини Е аш 240 Зеленый: 0 
ЦветіЗаливка 


Определить цвет вка Яркость: 120. Синий: 0 


ок Отмена Добавить в набор 


Рис. 1.5. Диалоговое окно для выбора цвета 


O зеаксь — поле ввода подстроки для поиска: 


<input type="search"> 


С date — поле для ввода даты (элемент не поддерживается браузерами Firefox и 


Internet Explorer): 


<input type="date"> 
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С time — поле для ввода времени (элемент не поддерживается браузерами Firefox 
и Internet Explorer): 


<input type="time"> 


С datetime-local — поле для ввода локальной даты и времени (элемент не под- 
держивается браузерами Firefox и Internet Explorer): 


<input type="datetime-local"> 


О month — поле для ввода месяца и года (элемент не поддерживается браузерами 
Firefox и Internet Explorer): 


<input type="month"> 


СО week— поле для ввода номера недели и года (элемент не поддерживается Opay- 
зерами Firefox и Internet Explorer): 


<input type="week"> 
B HTML 5 тег <input> получил новые параметры: 


С autocomplete — аналогичен одноименному параметру тега <form>. Значение оп 
включает автодополнение, off — отключает: 


<input type="text" autocomplete="off"> 
O autofocus — устанавливает фокус ввода на элемент: 
<input type="text" name="field2" autofocus> 


o placeholder — задает текст подсказки, который будет выводиться прямо в поле 
ввода, пока поле не заполнено: 


<input type="text" р1асеро149етг="Введите имя"> 


O required — если параметр указан, то поле обязательно для заполнения: 


<input type="text" required> 


П pattern— шаблон вводимого значения в виде регулярного выражения 
JavaScript: 


<input type="tel" placeholder="+0 (000) 000-00-00" required 
pattern="\+[1-9] \([0-9]{3}\) [0-9]{3}-[0-9]{2}-[0-9]{2}"> 


С form— связывает элемент с формой по ее идентификатору (применяется только, 
если элемент находится вне формы): 


<form асбіоп-"ргосезз.рһр" id="form1"></form> 
<input type="text" name="field1" form="form1"> 


Новые элементы сначала проверяют, является ли введенное значение корректным 
числом, адресом электронной почты, (/КІ.-адресом, датой, временем ит. д., и толь- 
ко в случае успешного выполнения этой проверки данные формы отправляются на 
сервер. Если проверка не увенчается успехом, данные отправлены не будут, и по- 
явится сообщение о некорректном вводе данных. Мы можем отключить эту про- 
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верку, указав в теге <form> параметр novalidate. Однако делать это следует лишь 
в особых случаях. 


Если пользователь не ввел значение в элемент управления, помеченный как обяза- 
тельный к заполнению (указан параметр required), или если это значение не соот- 
ветствует заданным параметрам (не укладывается в указанный диапазон или не 
совпадает с шаблоном регулярного выражения из параметра pattern), то появится 
соответствующее предупреждение. Понятно, что данные на сервер в этом случае 
отправлены не будут. 


ПРИМЕЧАНИЕ 


Следует учитывать, что злоумышленник может изменить НТМЁ-код, поэтому на Web- 
сервере нужно в обязательном порядке выполнить проверку полученных данных, а не 
полагаться на У/ер-браузер. Тем не менее, проверка на стороне клиента позволит 
снизить нагрузку на У/ер-сервер, поэтому отказываться от такой проверки не следует. 
Данные нужно проверять и в У/ер-браузере, и на У/ер-сервере. 


Остальные параметры специфичны для каждого отдельного элемента. Поэтому 
рассмотрим каждый тип элемента отдельно. 


Текстовое поле и поле ввода пароля 
Для текстового поля и поля ввода пароля используются следующие параметры: 
O value — задает текст поля по умолчанию: 

<input type="text" name="field1" value="http://"> 


o maxlength — указывает максимальное количество символов, которое может быть 
введено в поле: 


<input type="text" паще="Е1е1 91" maxlength="100"> 


O size — определяет ВИДИМЫЙ размер поля ввода: 


<input type="text" паше="Е1е191" maxlength="100" size="20"> 


B HTML 5 доступен также параметр minlength, задаюший минимальное количество 
символов (параметр не поддерживается браузером Internet Explorer): 


<input type="text" паше="Е1е191" minlength="3"> 


Кнопки C6poc, Отправить и командная кнопка 


Для этих кнопок указывается один параметр: value — он задает текст, отображае- 
мый на кнопке: 


<input type="submit" уа1ае="Отправить"> 


Скрытое поле hidden 


Для скрытого поля указывается один параметр: value — он определяет значение 
скрытого поля: 


<input type="hidden" name="hidden1" уа1ае="1"> 
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Поле для установки флажка 
Для полей-флажков используются следующие параметры: 


С value — задает значение, которое будет передано \еБ-серверу, если флажок 
отмечен. Если флажок снят, значение не передается. Если параметр не задан, 
используется значение по умолчанию — оп: 


<input type="checkbox" папе-"сһесКкі" уа1ае="уез">Текст 


O checked — указывает, что флажок по умолчанию установлен: 


<input type="checkbox" папе-"сһесКкі" уа1ае="уез" сһескей>Текст 


Элементы checkbox можно объединить в группу. Для этого необходимо установить 
одинаковое значение параметра пате. Чтобы получить все значения на сервере, 
после названия поля следует указать квадратные скобки (это признак массива 
в языке РНР): 


<input type="checkbox" папе-"сһеск(1" уа1ае="1">Текст 1 
<input type="checkbox" папе-"сһеск(1" уа1ае="2">Текст 2 
<input type="checkbox" папе-"сһеск(1" уа1ае="З">Текст 3 


Элемент-перекл ючатель 
При описании элемента-переключателя используются такие параметры: 


О value — указывает значение, которое будет передано \МеБ-серверу, если nepe- 
ключатель выбран: 


<input type="radio" паще="тгаЯ101" уа1ае="уез">Текст 
Если ни ОДНО ИЗ значений не выбрано, никаких данных передано не будет; 


П checked — обозначает переключатель, выбранный по умолчанию: 


<input type="radio" паше="гаЧ101" уа1ае="уез" сһескеа>Текст 


Элемент-переключатель может существовать только в составе группы подобных 
элементов, из которых может быть выбран ТОЛЬКО ОДИН. Для объединения пере- 
ключателей в группу необходимо установить одинаковое значение параметра name 
и разное значение параметра value: 


Укажите ваш пол:<рг> 


<input type="radio" паме="ѕех" value="male" сһескеа>Мужской 
<input type="radio" name="sex" уа1ае="Еета1е">Женский 


Поле выбора файла 
Поле ДЛЯ выбора файла поддерживает следующие параметры: 


П multiple — если параметр указан, то можно выбрать сразу несколько файлов: 


<input type="file" multiple> 
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П accept — задает поддерживаемые МІМЕ-типы или расширения файлов (значе- 
ния приводятся через запятую): 


<input буре="Ғі1е" accept="image/jpeg, image/png, image/gif"> 
<input type="file" accept="image/*"> 


<input type="file" ассері=".91#, .јрд, .јред"> 


Элементы для ввода числа и выбора значения из диапазона 
Элементы number и range поддерживают следующие параметры: 

O value — текущее значение; 

П піп-- минимальное значение; 

О пах — максимальное значение; 

O step — шаг. 

Пример: 


<input Журе-"тгапде" тіп="0" пах-"100" уа1ае="10" step="2"> 


Элемент для ввода даты 

Элемент date поддерживает следующие параметры: 
П value — текущее значение; 

П піп-- минимальное значение; 


О пах-- максимальное значение. 


Значение указывается в формате гггг-мм-дд: 


<input type="date" піп-"2010-01-01" пах="2020-01-01" уа1ае="2018-01-01"> 


1.11.5. Список автодополнения 


Автодополнение значений, заносимых в поле ввода, — очень полезная вещь. Впро- 
чем, не всегда, и именно поэтому HTML 5 позволяет нам отключить его, указав для 
параметра autocomplete значение off. Но мы можем сделать его еще лучше, задав 
для какого-либо поля ввода несколько предопределенных значений, которые будут 
подставлены в список автодополнения. 


В HTML 5 этот список создается с помощью парного тега <datalist> (он не под- 
держивается браузером Safari). Для него мы в обязательном порядке с помощью 
параметра іа укажем идентификатор. 


Позиции для списка автодополнения создаются с помощью тегов <option>. Эти 
теги помещаются внутрь тега <datalist>. 


И напоследок мы привяжем созданный список к полю ввода, задав в его теге иден- 
тификатор списка в качестве значения параметра list (листинг 1.20). Результат 
показан на рис. 1.6. 
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Листинг 1.20. Пример автодополнения 


<datalist id="þbrowsers"> 


<option value="Internet Explorer"></option> 
<option value="Firefox"></option> 
<option value="Chrome"></option> 
<option уа1ае="Орега"></орЕ1оп> 
<option value="Safari"></option> 
</datalist> 
<input type="text" name="þbrowser" 1іѕі="ргоиѕегѕ" 
placeholder="Bam Мер-браузер"> 


1 Отправить 
Internet Explorer 

Firefox 

Chrome 

Opera 

Safari 


Рис. 1.6. Список автодополнения 


1.11.6. Тег <ѓехѓагеа>. Текстовая область 
Парный тег <textarea> создает внутри формы поле для ввода многострочного 
текста: 


<сехгагеа> 
Текст по умолчанию 
</textarea> 


В окне Web-6paysepa поле отображается в виде прямоугольной области с полосами 
прокрутки. 

Тег имеет следующие параметры: 

О name — уникальное имя поля: 


<textarea name="txt"> 
Текст по умолчанию 
</textarea> 


O со15 — ширина поля: 


<textarea name="txt" со1ѕ="15"> 
Текст по умолчанию 
</textarea> 


O rows — число етрок видимого текста: 


<textarea name="txt" со15="15" гомз="10"> 
Текст по умолчанию 
</textarea> 
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П disabled — запрещает доступ к элементу формы. При наличии параметра эле- 


мент отображается серым цветом: 


<textarea name="txt" disabled></textarea> 


readonly — указывает, что элемент доступен только для чтения. При наличии 
параметра значение элемента изменить нельзя: 


<сехсагеа name="txt" геадйопіу> 
Значение только для чтения 
</textarea> 


B HTML 5 тег <textarea> получил новые параметры: 


С autocomplete — аналогичен одноименному параметру тега <form>. Значение оп 


включает автодополнение, оЕЕ — отключает: 


<textarea name="txt" autocomplete="off"> 
Текст по умолчанию 
</textarea> 


autofocus — устанавливает фокус ввода на элемент: 


<textarea name="txt" autofocus></textarea> 


placeholder — задает текст подсказки, который будет выводиться прямо в поле 
ввода, пока поле не заполнено: 


<textarea name="txt" ріасеһо1аег="Введите текст"></ёехёагеа> 


required — если параметр указан, то поле обязательно для заполнения: 


<textarea папе="Е хе" required></textarea> 


maxlength — указывает максимальное количество символов, которое может быть 
введено в поле: 


<textarea name="txt" maxlength="100"></textarea> 


minlength — задает минимальное количество символов (параметр He поддержи- 
вается браузером Internet Explorer): 
<textarea name="txt" minlength="3"></textarea> 


wrap — управляет автоматической вставкой символов переноса строк В текст, 
если он не помещается на строке. Может принимать следующие значения: 


e зоЕЕ — слова автоматически переносятся на новую строку, но на сервер CHM- 
волы переноса строк не отправляются (значение по умолчанию); 

® Гага — текст переносится на новую строку и символы переноса отправляют- 
ся на сервер (в этом случае требуется указать параметр со15): 


<textarea name="txt1" wrap="soft"></textarea> 
<textarea name="txt2" wrap="hard" cols="20"></textarea> 


form — связывает элемент с формой по ее идентификатору (применяется только, 
если элемент находится вне формы): 
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<form асбіоп-"ргосезз.рһр" id="form1"></form> 
<textarea name="txt1" form="form1"></textarea> 


B CSS 3 атрибут стиля resize позволяет указать, можно ли изменять размеры TeK- 
стовой области с помощью мыши. Он может принимать следующие значения: 


С none — размеры поля изменить нельзя; 

С horizontal — можно только по горизонтали; 

С vertical — можно только по вертикали; 

С both — размеры поля можно менять и по горизонтали, и по вертикали. 
Пример указания атрибута resize в параметре style: 


<textarea со15="25" гомз="10" style="resize: both"> 
Текст по умолчанию 
</textarea> 


1.11.7. Ter <select>. 
Список с предопределенными значениями 


Тег <select> создает внутри формы список с возможными значениями: 


<select> 
<орііоп>Элемент1</орііоп> 
<орііоп>Элемент2</орііоп> 
</select> 


Тег <select> имеет следующие параметры: 
O name — задает уникальное имя списка: 


<select name="select1"> 


O size — определяет число одновременно видимых элементов списка: 


<select name="select1" size="3"> 


По умолчанию size имеет значение 1; 


С multiple — указывает, что из списка можно выбрать сразу несколько элементов 
одновременно. Чтобы получить все значения на сервере, после названия списка 
следует указать квадратные скобки (это признак массива в языке РНР): 


<select name="select[]" size="3" multiple> 


П disabled — запрещает доступ к элементу формы. При наличии параметра эле- 
мент отображается серым цветом: 


<select name="select1" disabled> 


B HTML 5 тег <select> получил новые параметры: 
П autofocus — устанавливает фокус ввода на элемент: 


<select name="select1" autofocus> 
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П required — если параметр указан, то в списке обязательно должен быть выбран 
пункт: 


<select папе-"зе1есі1" віге-"2" required> 


<орЕ1оп>Элемент1</оре1оп> 
<орЕ1оп>Элемент2</оре1оп> 
</select> 


С form— связывает элемент с формой по ее идентификатору (применяется только, 
если элемент находится вне формы): 


<form асбіоп-"ргосезз.рһр" id="form1"></form> 
<select name="select1" form="form1"> 


<орЕ1оп>Элемент1</оре1оп> 
<орЕ1оп>Элемент2</оре1оп> 
</select> 


Внутри тегов <select> И </select> располагаются теги <option>, С ПОМОШЬЮ KOTO- 
рых описывается каждый элемент списка. Закрывающий тег не обязателен. 


Тег <option> имеет следующие параметры: 


О value — задает значение, которое будет передано \еБ-серверу, если пункт спи- 
ска выбран. Если параметр не задан, посылается текст этого пункта: 


<select паше="5е1ес®1"> 

<option уа1ае="уа11">Элемент1</ор&1о0> 
<орЕ1оп>Элемент2</оре1оп> 

</select> 


Если выбран ПУНКТ Элемент1, ТО посылается: 


select1=val1 


Если выбран пункт Элемент2, то посылается: 


зе1ес*1=Элемент2 


С selected — указывает, какой пункт списка выбран изначально: 


<select паше-"ве1есі1"> 
<option уа1ае="уа11">Элемент1</ор&1о0> 


<option зе1есіеа>Элемент2</орііоп> 
</select> 


С disabled — делает пункт списка недоступным. При наличии параметра пункт 
отображается серым цветом: 


<select name="select1"> 

<option уа1ае="уа11">Элемент1</ор&1о0> 
<option аіѕар1еа>Элемент2</орііоп> 
</select> 


С помощью тега <optgroup> можно объединить несколько пунктов в группу. Назва- 
ние группы указывается в параметре label: 
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<select name="select1"> 
<optgroup Іаре1="Отечественные"> 


<option value="1">BA3</option> 
<option value="2">rA3</option> 
<option value="3">MockBsnu</option> 
</optgroup> 
<optgroup 1аре1-"Зарубежные"> 
<option value="4">BMW</option> 
<option value="5">0pel</option> 


<option value="6">Audi</option> 
</optgroup> 
</select> 


Результат показан на рис. 1.7. 


ВАЗ М отправить 


Opel 
Audi 


Рис. 1.7. Обьединение нескольких пунктов списка в группу 


Если в теге <optgroup> указать параметр disabled, то вся группа станет недоступ- 
ной: 


<optgroup Іаре1="Зарубежные" disabled> 


1.11.8. Ter <button>. Кнопка 


Парный тег <button> позволяет вставить кнопку. Внутри тегов <button> И </button> 
могут находиться различные элементы или просто текст, задающие содержимое, 
отображаемое на кнопке. Пример вывода значка и текста: 


<img згс="1сор.91Е" alt="" width="16" height="16" 
style="vertical-align: middle"> OtTnpasnTb</button> 


Ter <button> имеет следуюшие параметры: 
С type — задает тип кнопки: 


e submit — кнопка, при нажатии которой происходит отправка данных, BBE- 
денных в форму (значение по умолчанию): 


<button type=" submit">OrTnpasnTE</button> 
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Ф reset — кнопка, при нажатии которой ВСЯ форма очищается. Точнее сказать, 
все элементы формы получают значения по умолчанию: 


<button ёуре="геѕеё">Очистить</роёёоп> 


e button — обычная командная кнопка: 

<button type="button" onclick="alert ('OK')">0K</button> 
name -- задает имя кнопки; 
value — задает значение, отправляемое на сервер (папе-ча1че): 


<button name="þbtn1" уа1ае="ОК">Отправить</Баеоп> 


disabled — запрещает доступ к кнопке. При наличии параметра кнопка отобра- 
жается серым цветом: 


<button аізѕар1еа>Отправить</роиіёоп> 


В HTML 5 тег <button> получил новые параметры: 


o 


o 


autofocus — устанавливает фокус ввода Ha кнопку: 

<button аџіоҒосизѕ>Отправить</роиёёоп> 

form — связывает кнопку с формой по ее идентификатору (применяется только, 
если элемент находится вне формы); 

formaction — ЧКГ-адрес обработчика формы; 


formenctype — задает способ кодирования передаваемых данных. Может при- 
нимать значения: application/x-www-form-urlencoded (применяется по умолча- 
HHHO) ИЛИ multipart/form-data (указывается при пересылке \МеБ-серверу фай- 
лов); 


formmethod — определяет, как будут пересылаться данные из формы Web-cep- 
веру. Может принимать два значения: СЕТ и РО5Т; 


formtarget — указывает, куда будет помещен документ, являющийся резуль- 
татом обработки данных формы \еБ-сервером; 


formnovalidate — если присутствует, то значения, занесенные в поля ввода, не 
будут проверяться: 


<form асбіоп-"ргосезз.рһр" id="form1"></form> 

<button form="form1" formaction="test.php" formmethod="GET" 
formenctype="application/x-www-form-urlencoded" 
formtarget="_blank" formnovalidate="formnovalidate"> 
Отправить</риёбоп> 


1.11.9. Тег </аре/> 


С помощью тега <1аъе1> можно указать пояснительную надпись для элемента фор- 
мы. Тег имеет два параметра: 


o 


for — Позволяет указать идентификатор элемента, к которому привязана 
надпись. Точно такой же идентификатор должен быть указан в параметре id 
элемента формы: 
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<label Ғог="раѕѕм1">Пароль*:</1аре1> 
<input type="password" name="passw1" id="passw1"> 


Если элемент формы разместить внутри тега <label>, то надпись будет связана 
с элементом и без указания параметра for: 


<1аре1>Пароль*: 
<input type="password" папе="раззм1" іа="раѕѕм1"> 
</1аре1> 


П accesskey — задает клавишу быстрого доступа. При нажатии этой клавиши од- 
новременно с клавишей <Alt> (в браузерах Internet Explorer, Chrome и Safari), 
<Shift>+<Alt> (в браузере Firefox) или <Shift>+<Esc> (в браузере Opera) элемент 
окажется в фокусе ввода: 


<label ассеззкеу="М">Пароль* : 
<input type="password" папе-"развм1" id="passw1"> 
</1аре1> 


В качестве примера рассмотрим форму регистрации пользователя (листинг 1.21), 
а заодно продемонстрируем использование С55 для форматирования страницы. 


Листинг 1.21. Пример формы регистрации пользователя 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<title>llpnumep формы регистрации nmonb3oBaTena</title> 
<style type="text/css"> 
body { /% Стиль для всего документа */ 
font-size: 10рЕ; /% Размер шрифта */ 


font-family: "Verdana", sans-serif; /% Название шрифта */ 
} 
label ( /* Стиль для всех элементов label */ 
display: inline-block; /% Тин блока */ 
width: 150px; /% Ширина */ 
vertical-align: top; /* Вертикальное выравнивание */ 
} 
зеіесе { /% Стиль для всех списков */ 
width: 250px; /% Ширина */ 
border: 1рх solid black; /% Определение стиля для границы */ 
} 
input.txt { /% Стиль для элемента input, имеющего класс txt */ 
width: 250px; /* Ширина */ 
border: 1px solid black; /% Определение стиля для границы */ 
} 
textarea { /% Стиль для многострочного текстового поля */ 
width: 250px; /% Ширина */ 
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height: 100px; /* Высота %/ 
border: 1рх solid black; /* Определение стиля для границы */ 
} 
form div { /* Стиль для всех div, расположенных внутри form */ 
margin-bottom: 20px; /* Отступ блока снизу */ 
} 
</style> 
</head> 
<body> 
<һ1>Пример формы регистрации пользователя</Һһ1> 
<form action="reg.php" method="POST" enctype="multipart/form-data"> 
<div><label Ғог="1одіп">Логин*:</1аре1> 
<input type="text" пате="1одіп" іа="1одіп" class="txt" required> 
</div> 
<div><label Ғог="раѕѕм1">Пароль* :</1аре1> 
<input type="password" name="passw1" id="passw1" 
class="txt" required> 
</div> 
<div><label Ғог="раѕѕм2">Повторите пароль*:</1аре1> 
<input type="password" name="passw2" іа="раѕѕи2" 
class="txt" required> 
</div> 
<div><label Ғог="ѕех1">Пол*:</1аре1> 
Myx. <input type="radio" name="sex" id="sex1" value="1"> 
Жен. <input type="radio" name="sex" id="sex2" value="2"></div> 
<div><label Ғог="ейџсаііоп">Образование* :</1аре1> 
<select 1а="ейџсаііоп" папе="ейџсаііоп" required> 
<option уа1ае="" аізѕар1еа>&прѕр; </орііоп> 
<option уа1џе="1">Среднее</орііоп> 
<option уаТае="2">Высшее</орЕ1оп> 
</зе1есЕ></а1у> 
<div><label Ғок-"соштпепе">Комментарий:</1аБре1> 
<textarea id="comment" раще="сопиер®" со15="15" rows="10"></textarea> 
</div> 
<div><label for="userfile">Bame фото:</1аре1> 
<input type="file" name="userfile" id="userfile"></div> 


<div><label for="rule">C правилами согласен* :</1аре1> 

<input type="checkbox" name="rule" id="rule" value="yes" required> 
</div> 

<div> 


<input type="submit" уа1ае="Отправить" style="margin-left: 150px; "> 
</div> 
</form> 
</body> 
</html> 
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1.11.10. Группировка элементов формы 


Парный тег <fieldset> позволяет сгруппировать элементы формы. УҮеВ-браузеры 
вокруг группы отображают рамку. На линии рамки с помощью тега <legend> МОЖНО 
разместить надпись: 


<fieldset> 
<1едепа>Пол</1едепа> 
Муж. <input type="radio" папе="зех" уа1ае="1"> 
Жен. <input type="radio" пате="ѕех" уа1ае="2"> 
</fieldset> 


1.12. Ter <meter> 


С помощью парного тега <meter> B HTML 5 можно отобразить значение из диапа- 
зона в графической форме (не поддерживается браузером Internet Explorer). Тег 
имеет следующие параметры: 


О value — текущее значение; 

О шіп-- минимальное значение; 

О max — максимальное значение; 

O optimum — оптимальное значение; 
П 1о4--низкое значение; 

П һіаҺ-- высокое значение. 
Пример: 


<meter уа1ае="10" min="0" пах="100" optimum="50" Іои="25" Һіаһ-"75"> 
Мер-браузер не поддерживает элемент meter 

</meter> 

<meter value="50" min="0" пах="100" optimum="50" low="25" high="75"> 
</meter> 

<meter value="80" min="0" max="100" optimum="50" low="25" high="75"> 
</meter> 


1.13. Тег <progress>. Индикатор хода процесса 


В HTML 5 доступен парный тег <progress>, позволяющий в графической форме 
отобразить текущее состояние хода длительного процесса. Тег имеет следующие 
параметры: 


O value — текущее значение; 

П пах — максимальное значение. 

Пример: 

<ргодгеѕз пах-"100" уа1ае="75"></ргодгез$> 


Обычно тег имеет смысл использовать совместно со скриптом на языке JavaScript. 
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1.14. Аудио и видео 


В HTML 5 добавлена поддержка вставки на УУеВҺ-страницы аудио- и видеороликов 
без применения сторонних программ, но, к сожалению, разные М№еб-браузеры под- 
держивают различные форматы аудио и видео. 


1.14.1. Вставка аудиоролика 


Аудиоролик на \!еБ-страницу вставляется с помощью тега <audio>: 


<audio src="sound.mp3" controls preload="metadata"> 


<р>Ваш Мер-браузер не поддерживает элемент audio</p> 
</audio> 


Если \!еБ-браузер не поддерживает тег <audio>, то будет выведено соответствую- 
щее сообщение, расположенное между тегами <audio> и </audio>. 


В Интернете используются следующие основные форматы аудио: MP3, ААС, 
OGG/Vorbis и WAV. Первые два формата поддерживаются всеми основными CO- 
временными УҮер-браузерами. Формат OGG/Vorbis не поддерживается браузерами 
Internet Explorer и Safari. Формат WAV не поддерживается браузером Internet 
Explorer. 


Ter <audio> содержит следующие параметры: 
С згс--путьк файлу с аудиозаписью; 


П autoplay — если указан, воспроизведение ролика начнется сразу после загрузки 
страницы: 


<audio src="sound.mp3" autoplay></audio> 


П controls — если параметр указан, на экране будут присутствовать элементы для 
управления воспроизведением ролика (шкала процесса с регулятором позиции 
воспроизведения, регулятор громкости, кнопки пуска и паузы и кнопка отклю- 
чения звука); 


С ісор-- если указан, ролик будет воспроизводиться бесконечно («зациклится»): 


<ачдіо src="sound.mp3" autoplay loop></audio> 
С muted — если указан, после загрузки страницы звук будет отключен; 


П preload — позволяет указать, как будет выполнена предварительная загрузка 
файла с роликом. Доступны три значения: попе (не выполнять предварительную 
загрузку), metadata (загрузить только самое начало файла, где хранятся сведения 
о ролике, в частности, его продолжительность) и auto (загрузить весь файл, 
поведение по умолчанию). Этот параметр имеет смысл указывать лишь в том 
случае, если параметр autoplay отсутствует в теге. 
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1.14.2. Вставка видеоролика 


Для вставки на \еБ-страницу видеоролика применяется тег <video>: 


<video src="video.mp4" controls width="500"> 


<р>Ваш Мер-браузер не поддерживает элемент video</p> 
</мідео> 


Если УУер-браузер не поддерживает тег <video>, то будет выведено соответствую- 
щее сообщение, расположенное между тегами <video> и </video>. 


В Интернете используются следующие основные форматы видео: МРЕС 4/Н.264, 
ОСС/Тһеога и WebM. Первый формат поддерживается всеми основными совре- 
менными \/еБ-браузерами. Два последних не поддерживаются браузерами Internet 
Explorer и Safari. 


Ter <video> содержит следующие параметры: 


О 
og 


src — Путьк файлу с видеозаписью; 


autoplay — если указан, воспроизведение ролика начнется сразу после загрузки 
страницы; 


controls — если параметр указан, на экране будут присутствовать элементы для 
управления воспроизведением ролика (шкала процесса с регулятором позиции 
воспроизведения, регулятор громкости, кнопки пуска и паузы, кнопка отключе- 
ния звука и кнопка полноэкранного режима); 


1оор — если указан, ролик будет воспроизводиться бесконечно («зациклится»): 


<video src="videol.mp4" controls autoplay loop></video> 


muted — если указан, после загрузки страницы звук будет отключен; 


preload — позволяет указать, как будет выполнена предварительная загрузка 
файла с роликом. Доступны три значения: попе (не выполнять предварительную 
загрузку), metadata (загрузить только самое начало файла, где хранятся сведения 
о ролике, в частности, его продолжительность) и auto (загрузить весь файл, по- 
ведение по умолчанию). Этот параметр имеет смысл указывать лишь в том слу- 
чае, если параметр autoplay отсутствует в теге; 


width — ширина области воспроизведения (в пикселах); 


height — высота области воспроизведения (в пикселах). Если ширина и высота 
не указаны, то будут использоваться размеры видео. Если указан только один 
параметр, то значение второго будет рассчитано автоматически с соблюдением 
пропорций; 


poster — ПУТЬ К изображению, которое будет отображаться в области воспроиз- 
ведения. Если параметр не указан, будет выведен первый кадр ролика: 


<уідео src="video.mp4" controls width="640" height="480" 
poster="poster.jpg"></video> 
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1.14.3. Указание нескольких источников 
аудио или видео 


Ранее говорилось, что разные УУер-браузеры поддерживают различные форматы 
аудио- и видеофайлов. В связи с этим возникает вопрос: можно ли указать в теге 
<audio> ИЛИ <video> несколько вариантов, чтобы УУер-браузер загрузил тот, KOTO- 
рый он поддерживает? 


Можно. Требуется лишь удалить из тега <audio> ИЛИ <video> параметр src и помес- 
тить в сам этот тег набор тегов <source>, каждый из которых укажет один из вари- 
антов помещаемого на страницу файла: 


<чідйео controls> 
<source src="video.mp4"> 


<source src="video.webm"> 
</video> 


Здесь мы указываем в теге <video> два ролика (в форматах MP4 и WebM). 
Тег <зовгсе> содержит следующие параметры: 
П згс--путьк файлу с роликом; 


П type — МІМЕ-тип файла с роликом: уіайео/тра (для MPEG 4), video/webm (для 
WebM), гоаіо/трео (для МРЗ), audio/ogg (для ОСО) и др. Если параметр не yka- 
зан, \\еБ-браузер сам определит формат файла. 


1.14.4. Тег <track> 


Тег <Ехаск> позволяет добавить к мультимедиа текстовую дорожку — например, 
субтитры к видео. Тег имеет следующие параметры: 

С кс — задает путь к файлу с текстовой дорожкой; 

О srclang — указывает код языка; 


П кіпа — задает тип дорожки: subtitles (субтитры), captions (заголовки), 
descriptions (описания), chapters (Главы) и metadata (метаданные); 


С label — название дорожки; 
П default — если параметр указан, то определяет дорожку по умолчанию. 
Вот пример добавления русских и английских субтитров к видео: 


<уідео controls ила ="500"> 
<source згс="у1аео.пр4"> 


<source src="video.webm"> 
<track src="subtitles.ru.vtt" srclang="ru" kind="subtitles" 
label="Russian" default> 
<track src="subtitles.en.vtt" srclang="en" kind="subtitles" 
label="English"> 
<р>Ваш Мер-браузер не поддерживает элемент video</p> 
</чідео> 
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Содержимое файла subtitles.ru.vtt: 


МЕВУТТ FILE 

00:00.000 --> 00:01.000 
Эпизод 1 

00:02.000 --> 00:20.000 


Эпизод 2 


1.15. Универсальные параметры 


В предыдущих разделах мы рассмотрели параметры, характерные для конкретных 
тегов. Однако существуют также универсальные параметры, которые содержат 
большинство тегов. Давайте рассмотрим наиболее важные универсальные пара- 
метры: 


П іа — задает уникальный идентификатор элемента. С помощью этого идентифи- 


катора мы можем обратиться к элементу из С55 или из скрипта на языке 
JavaScript. Имя идентификатора должно начинаться с буквы и может содержать 
латинские буквы, цифры и символ подчеркивания: 


<div id="mydiv"></div> 
Пример обращения из CSS (задаем цвет фона и высоту элемента): 


<style type="text/css"> 
#mydiv { 
background: green; 
height: 100px 
} 
</style> 


Пример обрашения из скрипта на JavaScript (вставляем текст): 


<script> 

var mydiv = document.getElementById ('mydiv'); 
mydiv.innerHTML = "Текст внутри элемента с id mydiv'; 
</script> 


class — задает стилевой класс для элемента: 


<div class="mydiv"></div> 


C помошью этого класса мы можем обратиться к элементу из CSS (обратите 
внимание: перед именем класса мы указываем точку, а не символ 4): 


<style type="text/css"> 
.mydiv { 
background: green; 
height: 100px 
} 
</style> 
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O style — позволяет указать стилевое оформление для элемента: 


<div style="þbackground: green; height: 100рх"></діу> 


П title— задает текст всплывающей подсказки, отображаемой при наведении 
указателя мыши на элемент: 


<div style="background: green; height: 100px" 
title="TekcT подсказки">Текст</аіу> 


С hidden — скрывает элемент от просмотра (отобразить элемент можно с по- 
мощью скрипта на языке JavaScript): 


<div style="background: green; height: 100px" hidden> 
Текст</аіу> 


П tabindex — задает порядок обхода элементов при нажатии клавиши <Tab>: 


<input type="text" tabindex="2"> 
<input type="text" tabindex="1"> 


С аања-<Имя> — позволяет создать пользовательский параметр с произвольным 
именем (параметр доступен в НТМІ, 5): 


<div style="þackground: green; height: 100px" data-mydata="5"> 
Текст</аіу> 


С оп* — группа параметров, позволяющих назначить обработчик какого-либо CO- 
бытия: 


<button type="button" onclick="alert ('OK')">0K</button> 


Эти параметры мы рассмотрим при изучении языка JavaScript. 


1.16. Проверка НТМЕ-документов 
на соответствие стандартам 


После создания НТМГ-документа его необходимо проверить на отсутствие ошибок 
и соответствие стандартам. Ведь можно случайно забыть закрыть тег, допустить 
опечатку в названии тега или параметра, нарушить правильность вложенности 
тегов и др. У/еһ-браузеры обычно не сообщают об ошибках, а пытаются их обрабо- 
тать. Поэтому о существовании ошибок можно узнать только в случае, если Web- 
браузер неправильно их обработал, и это видно в его окне. 


Для проверки НТМГ-документов предназначены сайты http://validator.w3.org/ и 
https://html5.validator.nu/. Чтобы проверить документ, размещенный в Интернете, 
достаточно ввести ОКГ-адрес и нажать кнопку Check. Можно также загрузить 
файл или вставить НТМГ-код в поле ввода многострочного текста. Если после про- 
верки были обнаружены ошибки, то будет выведено их подробное описание. После 
исправления ошибок следует повторно проверить НТМГ-документ. 
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Основы CSS 3. 
Форматируем Меб-страницу 
с помощью стилей 


2.1. Способы встраивания определения стиля 


Каскадные таблицы стилей (Cascading Style Sheets, CSS) позволяют существенно 
расширить возможности языка HTML за счет более гибкого управления формати- 
рованием \е-страницы. Применение стилей позволяет задавать точные характе- 
ристики практически всех элементов \!еБ-страницы, а это значит, что можно точно 
контролировать внешний вид УУер-страницы в окне У/ер-браузера. 


Рассмотрим пример указания размера шрифта для абзаца: 
<р style="font-size: 12рі">Текст</р> 
и, прежде чем приступить к изучению С55, разберемся с основными понятиями. 


Значение параметра style (font-size: 12р%) называется определением стиля или 
стилем. Элемент определения стиля (font-size) называется атрибутом. Каждый 
атрибут имеет значение (12р<), указываемое после двоеточия. Совокупность опре- 
делений стилей, вынесенных в заголовок НТМГ-документа или в отдельный файл, 
называют таблицей стилей. 


В этом издании книги мы будем изучать третью версию CSS. Как и в HTML 5, под- 
держка атрибутов CSS 3 зависит от У/ер-браузеров. Если при описании атрибута не 
указана версия С55, то эти возможности были доступны в С55 2. Для новых атри- 
бутов, появившихся в CSS 3, мы будем явно указывать версию. Поэтому, если есть 
большое желание поддерживать старые версии \!еБ-браузеров, то атрибуты, обо- 
значенные версией CSS 3, лучше не использовать. 


ПРИМЕЧАНИЕ 


Получить полную информацию о текущей поддержке атрибутов стиля У/ер-браузе- 
рами можно на сайте ћрѕ://сапіиѕе.сот/. 


Задать стиль можно тремя способами: встроить определение стиля в тег, встроить 
определения стилей в заголовок НТМГ-документа или вынести таблицу стилей 
в отдельный файл. 
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2.1.1. Встраивание определения стиля в тег 

Определение стиля, как и было отмечено ранее, встраивается в любой тег с по- 
мощью параметра style: 

<р style="font-size: 12рі">Текст</р> 

Обратите внимание: параметр style поддерживают все теги. 


Если определение стиля состоит из нескольких атрибутов, то они указываются 
через точку с запятой: 


<р style="font-size: 12pt; color: геа">Текст</р> 
Если какое-либо значение атрибута требует наличия кавычек, то оно указывается 
в апострофах: 


<р style="font-size: 12pt; color: red; font-family: 'Times Мем Roman'"> 
Текст</р> 


2.1.2. Встраивание определения стилей 
в заголовок НТМІ -документа 
Все определения стилей можно собрать в одном месте (листинг 2.1). В этом случае 


стили указываются между тегами <style> и </style>. Сам тег <style> должен быть 
расположен в разделе HEAD НТМІ -документа. 


Листинг 2.1. Пример использования стилей 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 

<title>llpmmep использования стилей</біё1е> 

<style type="text/css"> 

body { /* Стиль для всего документа */ 
font-size: 16рі; 
color: black; 
font-family: "Verdana" 


р { /% Стиль для всех абзацев */ 
font-size: 12pt; 
color: black; 


font-family: "Arial" 


#txt /ж Стиль для элемента с id="txt" */ 
со1ог: дгееп 


с 
Ф 
ж 
е 


/ж Стиль для класса class="text" */ 


color: red 


Основы CSS 3. Форматируем Web-cmpaHuuy с помощью стилей 93 


</style> 

</head> 

<body> 

<р>Текст 1</р><!-- Цвет по умолчанию --> 

<р іа="Ехі">Текст 2</р><!-- Зеленый текст 12рі --> 

<р class="text">TekcT 3</р><!-- Красный текст 12рЕ --> 
<div с1аѕѕ="Бехі">Текст 4</4іу><!-- Красный текст 16рЕ --> 
</body> 

</html> 


Атрибуты определения стиля, указанные между тегами <style> H </style>, заклю- 
чаются в фигурные скобки. Если атрибутов несколько, то они приводятся через 
точку с запятой: 


<Селектор> { <Атрибут 1>: «Значение 1>; ...; <Атрибут №: <Значение № } 


После последнего определения стиля перед закрывающей фигурной скобкой ста- 
вить точку с запятой не обязательно. 


В листинге 2.1 мы воспользовались тремя основными видами селекторов: именем 
Tera, идентификатором элемента (параметр id) и стилевым классом (параметр 
class). Селектор с именем тега применяет стили ко всем тегам с указанным име- 
нем. Разница между двумя последними способами заключается в том, что иденти- 
фикатор указывается только для одного элемента, тогда как стилевой класс можно 
прикрепить к нескольким элементам, причем элементы могут быть разными (на- 
пример, в нашем примере это и абзац, и элемент div). 


Стили, примененные непосредственно к элементу, могут переопределять стили для 
всего документа. Например, стили, указанные для элемента body, наследуются BCE- 
ми элементами. Однако для элемента с идентификатором txt мы явно указываем 
другой цвет текста, поэтому цвет, указанный в элементе body, переопределяется. 
Для стилевого класса text не указан размер шрифта, поэтому его значение будет 
наследоваться от других элементов. Для элементов р у нас указан размер 12р<, KO- 
торый переопределит размер для элемента body, а вот элемент div наследует размер 
16pt от элемента body. 


Чтобы наглядно увидеть процесс наследования и переопределения атрибутов стиля, 
воспользуемся панелью Инструменты разработчика Web-6paysepa Firefox: oT- 
крываем вкладку Инспектор, выделяем первый абзац и переходим на вкладку 
Правила. Результат показан на рис. 2.1 — все переопределенные стили в разделе 
Унаследовано от body зачеркнуты. Если мы выделим элемент div, то зачеркнут 
будет только один атрибут color (рис. 2.2). Это означает, что элемент аіу наследует 
все стили от элемента body, кроме color. 
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@ инструменты разработчика - Пример использования стилей ~ file:///C:/book/test.html = ШЕШ 
ІСІ): Г} Инспек Консо. D Отладч {} Стил @ Профай/ Я Памя = Сет В Хранили Е” БН 3 НЦ 


+ Поиск в HTML ғы Правила Вычислено Разметка Анимации 
<!РОСТУРЕ html> Фильтр стилей 
<html 1апё="ги"> 
М е элемент { 
т <body> z 
Ж intine:7 
<!--Цвет по умолчанию--> font-size: 12р+; 
<р id="txt">TekcT2</p> color: @ black; 
<!--Зеленый текст 12р%--> font-family: "Arial"; 
<р class="text">TekcTtT3</p> } 


<!--Красный текст 12pt--> 


е > Унаследовано от body 
<div с1а55-"Техі">Текст4</діу> 


<!--Красный текст 16р%--> body { 1114 пе:2 
</body> AE EEE SA 
</html> color @ tc 
Ta в - е ва at 
} 


Рис. 2.1. Переопределение стилей 


е Инструменты разработчика - Пример использования стилей - file:///C:/book/test.html = Е 
O МЕЙ 212 Б] консо 0 Отладч () Стил (@, Профайл Я} Памя = Сет В Хранили НУ" Я В ЫП 


+ Поиск в HTML Ф БП Правила Вычислено Разметка Анимации 
<!ФОСТҮРЕ һіті> Фильтр стилей + ® ds 
<html 1апё="ги"> n 
к элемент 1 inline 
b қ қ 
> 

т <Боду> 54 

<р>Текст 1</p> „text мі inline:15 

<!--Цвет по умолчанию--> color: Ф =d; 

<р іа="Ехё">Текст2</р> } 


<!--Зеленый текст 12р%--> 
<р с1а55="{ехЕ">Текст3</р> EF Б 
<!--Красный текст 12р%--> body { SIERE 


<div class="text">TekctT4</div> font-size: 16рї; 


<!--Красный текст 16р%--> езее-фьісее; 
</body> font-family: "Verdana"; 


</html> } 


Унаследовано от body 


Рис. 2.2. Наследование стилей 


2.1.3. Вынесение таблицы стилей в отдельный файл 


Таблицу стилей можно вынести в отдельный файл. Файл с таблицей стилей обычно 
имеет расширение css и может редактироваться любым текстовым редактором, 
например Notepad++. Задать расширение файлу можно точно так же, как и при соз- 
дании файла с расширением һіті. И кодировка файлов точно такая же, как и 
у НТМІ-документа, — в нашем случае: ОТЕ-8 (без BOM). 


Вынесем таблицу стилей в отдельный файл style.css (листинг 2.2) и подключим его 
к основному документу test.html (листинг 2.3). С помощью правила @charset зада- 
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дим кодировку файла (не забудьте сам файл сохранить в этой кодировке). Обратите 
внимание: это правило должно быть самой первой строкой в файле! 


Листинг 2.2. Содержимое файла style.css 


@charset "utf-8"; /* Кодировка файла */ 

/% Так можно вставить комментарий */ 

Боау 1 /* Стиль для всего документа %/ 
font-size: 16рі; 

color: black; 

font-family: "Verdana" 


р { /% Стиль для всех абзацев */ 
font-size: 12pt; 
color: black; 


font-family: "Arial" 
} 


#txt { /* Стиль для элемента с id="txt" */ 


color: green 

} 

.text { /* Стиль для класса class="text" */ 
color: red 


Листинг 2.3. Содержимое файла test.html 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 


<title>llpnmep использования стилей</+іє1е> 
<link rel="stylesheet" type="text/css" href="style.css"> 


</head> 
<body> 

<р>Текст 1</р><!-- Цвет по умолчанию --> 

<р іа="Ехі">Текст 2</р><!-- Зеленый текст 12рё --> 

<р class="text">TekcT 3</р><!-- Красный текст 12рі --> 
<div class="text">TekcT 4</div><!-- Красный текст 16рі --> 
</body> 

</html> 


Сохраним оба файла в одной папке и откроем файл test.html в Web-6paysepe. Резуль- 
тат будет таким же, как и в предыдущем примере. 


Отдельный файл с таблицей стилей прикрепляется к НТМГ-документу с помощью 
одинарного тега <link>. В параметре href указывается абсолютный или относи- 
тельный интернет-адрес (URL) файла, а в параметре rel должно быть значение 
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stylesheet, показывающее, что присоединяемый таким образом документ содержит 
таблицу стилей: 


<link rel="stylesheet" type="text/css" href="style.css"> 


Подключить внешний (С55-файл можно также с помощью правила import: 


Qimport url (<ОКІ-адрес>) | <Тип устройства>]; 
Qimport <ОКІ-адрес>[ <Тип устройства>]; 


Правило Qimport ДОЛЖНО быть расположено внутри тега <style>: 


<style type="text/css"> 
Qimport url("style.css"); 
</style> 


В необязательном параметре <Тип устройства> можно указать устройство, для KOTO- 
рого предназначена подключаемая таблица стилей. Например, а11 — для любых 
устройств, print — для предварительного просмотра и распечатки документа, 
screen — для экрана монитора: 


<style type="text/css"> 
Qimport "style.css" print; 
</style> 


Таблицу стилей, вынесенную в отдельный файл, можно использовать B нескольких 
НТМІ.-документах. 


2.1.4. Приоритет применения стилей 


Предположим, что для абзаца определен атрибут color в параметре style ОДНОГО 
цвета, в теге <style> другого цвета, а в отдельном файле (листинг 2.4) — третьего 
цвета. Кроме того, в теге <span> задан четвертый цвет (листинг 2.5). 


Листинг 2.4. Содержимое файла style.css 


р { color: геа } 


Листинг 2.5. Содержимое файла test.html 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 

<ЕічІе>Приоритет применения стилей</біё1е> 

<link rel="stylesheet" type="text/css" href=ə"style.css"> 
<style type="text/css"> 


p { color: blue } 
</style> 
</head> 
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<роау> 
<р style="color: дгееп"> 
<span style="color: уе11ом">Текст 1</ѕрап> 
</р> 
<р style="color: дгееп">Текст 2</p> 
</body> 
</html> 


Какого цвета будет текст Текст 1? M какого цвета будет абзац с текстом Текст 2? 
Для ответа на эти вопросы и сушествует приоритет стилей: 


П стиль, заданный таблицей стилей, будет отменен, если в НТМГ-коде явно опи- 
сано форматирование элемента; 


С стиль, заданный в теге <style>, будет отменен, если в параметре style тега yka- 
зан другой стиль; 


П стиль, заданный в отдельном файле, будет отменен, если в теге <style> указано 
другое определение стиля. 


Именно из-за такой структуры приоритетов таблицы стилей и называют каскадными. 


Иными словами, наименьший приоритет имеет стиль, описанный в отдельном фай- 
ле, а самый высокий — стиль, указанный последним. В нашем примере к тексту 
Текст 1 будет применено форматирование, указанное в теге <span>, т. е. текст будет 
желтого цвета. А абзац с текстом Текст 2 будет иметь цвет, указанный в параметре 
style, Т. е. зеленый. 


Кроме того, следует учитывать, что стиль, заданный через идентификатор, будет 
иметь более высокий приоритет, чем стиль, заданный через класс: 


<style type="text/css"> 
#id1 { color: red } 
.Cls1 { color: blue } 
</style> 


<р id="id1" сІазз="с151">Текст</р> 
В этом примере текст абзаца будет красного цвета, а не синего. 


С помощью свойства !important можно изменить приоритет. Для примера изменим 
содержимое файла віуіе.св5 (листинг 2.4) на: 


р { color: red !important } 
В результате мы переопределили все стили, и абзац СО СЛОВОМ Текст 2 будет иметь 


красный цвет, а не зеленый. Однако Текст Текст 1 так и останется желтого цвета, 
т. к. цвет этот указан в теге <span>. 
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2.2. Указание значений атрибутов 


После значения в определении стиля необходимо уточнить, в каких единицах ука- 
зано это значение. Не указывать единицы измерения можно лишь для значения 0. 


2.2.1. Числа 


Дробная часть вешественного числа указывается через символ «точка»: 
р { со1ог: гара (255, 0, 0, 0.5) } 
Если перед символом «точка» указан нуль, то его можно опустить: 


р { со1ог: гара(255, 0, 0, .5) } 


2.2.2. Размеры 

Размеры в С55 можно задавать в абсолютных или относительных единицах. 
Абсолютные единицы: 

O рх — пиксел; 

mm — миллиметр; 

cm — сантиметр; 

іп — ДЮЙМ: 1 іп = 2.54 см; 


pt — ПУНКТ: 1 pt = 1/72 іп; 


Оооо0ооо 


рс — ПИКа: 1 рс = 12 pt. 

Относительные единицы: 

С $ — процент; 

П еп — высота текущего шрифта; 

П ех — высота буквы «х» текущего шрифта. 

В CSS 3 доступны также следующие относительные единицы: 

O сь — ширина символа «0» текущего шрифта; 

П rem — высота шрифта, указанного для корневого элемента (тега <html>); 

П vw— 1% от ширины области просмотра окна \МеБ-браузера; 

П vh— 1% от высоты области просмотра окна У/ер-браузера; 

П лил — 1% от меньшего значения из ширины или высоты области просмотра; 
П vmax — 1% от большего значения из ширины или высоты области просмотра. 


В С$5 3 в качестве значения атрибута стиля мы можем указать результат какого- 
либо вычисления. Для этого предусмотрена функция са1с(). Само выражение, KO- 
торое требуется вычислить, записывается сразу же после ее имени, берется в скоб- 
ки и имеет вид обычной алгебраической формулы: 


#main { width: calc(100vw - 400px) } 
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Этот стиль устанавливает для элемента с идентификатором main ширину, равную 
ширине области просмотра окна \!еБ-браузера, за вычетом 400 пикселов. 


В выражениях, указанных в функции са1с(), допустимы следующие операции: 
сложение (обозначается символом +), вычитание (-), умножение (*) и деление (/). 


2.2.3. Цвет 


Цвет можно задать одним из следующих способов: 
П именем цвета — blue, green И T. M.: 
p { color: red } 
O значением вида #RGB, где в — насыщенность красного. с — насыщенность зеле- 


ного и в — насыщенность синего в цвете. Значения задаются одинарными шест- 
надцатеричными числами от 0 до Е: 


р { color: #700 } 
O значением вида #RRGGBB, где вв — насыщенность красного, сс — насыщенность 


зеленого и вв — насыщенность синего в цвете. В таком формате значения зада- 
ются двузначными шестнадцатеричными числами от 00 до FF: 


р { color: #FF0000 } 

П значением вида гор (к, G, в), где R, си в — насыщенности красного, зеленого и 
синего цветов, которые задаются десятичными числами от 0 До 255: 
р { colors ү40(255, 0, 0) } 

П значением вида гор (к, с», В%), где вэ, G% и в* — насыщенности красного, 
зеленого и синего цветов, которые задаются в процентах: 
р { color: rgb(100%, 0%, 0%) } 

Все приведенные здесь примеры задают красный цвет. 

В CSS 3 добавлены следующие способы задания цвета: 


П значением вида гора (К, G, В, А), где в, си в — насыщенности красного, зеле- 
ного и синего цветов, которые задаются десятичными числами от 0 до 255, д — 
задает уровень прозрачности цвета (альфа-канал), представляющий собой зна- 
чение от 0.0 (цвет полностью прозрачен) до 1.0 (цвет полностью непрозрачен). 
Вот пример указания полупрозрачного красного цвета: 

р { со1ог: гора (255, 0, 0, 0.5) } 


Значения насыщенности красного, зеленого и синего цветов можно также задать 
в процентах: 
р { color: гара (100%, 0%, 0%, 0.5) } 

С значением вида №51 (Н, 5, 1), где н — оттенок (число от о до 359), $ — насышен- 
ность (проценты от о до 100) и т, — светлота (проценты от 0 до 100): 
р { color: 6$1(0, 100%, 50%) } 


100 Гпава 2 


С значением вида hsla(H, $, L, А), где н — оттенок (число от 0 до 359), $ — Ha- 
сышенность (проценты от 0 до 100), т, — светлота (проценты от 0 до 100) илд — 
уровень прозрачности цвета (альфа-канал), представляющий собой значение от 
0.0 (цвет полностью прозрачен) до 1.0 (цвет полностью непрозрачен): 


р { со1ог: 6$1а(0, 100%, 50%, 0.5) } 


Приведем названия наиболее часто используемых цветов: 


П ыаск — #000000 — черный; 

О white — #ЕЕЕЕЕЕ — белый; 

O уе11ои — #FFFF00 — желтый; 

О silver — #<0с0с0 — серый; 

О red— #FF0000 — красный; 

П green — #008000 — зеленый; 

О gray — #808080 — темно-серый; 
O blue — #0000ЕЕ — синий; 

O navy — #000080 — темно-синий; 
П purple — #800080 — фиолетовый. 


2.2.4. Строки 


Строки в С55 указываются внутри двойных или одинарных кавычек. С помощью 
символа «\» можно экранировать кавычку внутри строки: 


р { font-family: "Times Мем Roman" } 
div { font-family: 'Arial' } 


p:before { content: 'Д\'Арк ' } 


2.2.5. Углы 


Для обозначения углов в С55 3 используются следующие единицы: 
О deg — градусы: 

mydiv transform: rotate (45deg) } 

O хаа — радианы: 
mydiv transform: rotate (0.79гаа) } 
O grad — грады: 
mydiv transform: rotate (50grad) } 


С turn — повороты (полный круг равен 1turn): 


mydiv transform: rotate (0.125ёџгп) } 
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Пример вращения элемента с идентификатором mydiv на угол 45 градусов: 


#mydiv { 
position: absolute; 
left: 200px; top: 100px; 
width: 100px; height: 100px; 
background: red; 
transform: rotate (45deg) 


<div id="mydiv"></div> 


Перед значением угла можно указать знак минус. В этом случае врашение будет 
выполняться против часовой стрелки: 


#mydiv { transform: rotate (-45deg) } 


2.2.6. Универсальные значения 
В качестве значения атрибутов можно указать следующие ключевые слова: 
О inherit — значение наследуется от родителя: 

background-color: inherit 


О initial — задает исходное значение, используемое \еБ-браузером по умолча- 
нию: 


background-color: initial 


2.3. С55-селекторы 


Атрибуты определения стиля, указанные между тегами <style> M </style> ИЛИ 
в отдельном файле, заключаются в фигурные скобки. Если атрибутов несколько, то 
они приводятся через точку с запятой в формате: 


<Селектор> { <Атрибут 1>: «Значение 1>; ...; <Атрибут №: <Значение № } 


2.3.1. Основные селекторы 


В параметре <Селектор> могут быть указаны следующие селекторы: 
С * — все теги. Уберем все внешние и внутренние отступы: 

* { margin: 0; padding: 0 } 
O тег — все теги, имеющие указанное имя: 


р { font-size: 12рі; color: green; font-family: "Arial" } 


<р>Текст2</р><!-- Зеленый текст --> 
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О .класс — все теги, имеющие указанный класс: 


.Сехе1 ( font-size: 12рі; color: red; font-family: "Arial" } 


<div class="text1">TekcT1</div><!-- Красный текст --> 
<р с1аѕз="бехі1">Текст2</р><!-- Красный текст --> 


И Тексті И Текст2 будут красного цвета, хотя они находятся в разных тегах; 
O тег.Класс — Все теги, имеющие указанное имя и класс: 


p.text2 { font-size: 12pt; color: blue } 


<р class="text2">TekcT1</p><!-- Синий текст --> 


Обратите внимание, что если имя класса указать в другом теге, то стильне будет 
применен к этому тегу: 
<div class="text2">TekcT2</div> 
B этом случае фрагмент текста Текст2 не будет отображен синим цветом, T. к. 
имя класса text2 применяется только к тегу <р>; 

С Идентификатор — элемент с указанным идентификатором: 


ҒехЕ1 { color: red } 


<р ій-"Ехе1">Текст</р> 
Стили можно привязать сразу к нескольким селекторам, в этом случае селекторы 
указываются через запятую: 
р, div { font-family: "Arial" } 
Привязаться к другим элементам можно следующими способами: 


С селектор1 Селектор? — все элементы, соответствующие параметру Селектор2, 
которые располагаются внутри контейнера, соответствующего параметру Селек- 
тор1: 


div a { color: red } 
Цвет текста ссылки станет красным, если тег <а> находится внутри тега <div>: 
<div><a һгеғ="1іпк.һіқ1">Ссылка</а></аіу> 

o Селектор1 > Селектор2 — все элементы, соответствующие параметру Селектор2, 


которые являются дочерними для контейнера, соответствующего параметру 
Селектор]: 


div > а { color: геа } 


Цвет текста ссылки станет красным, если тег <a> находится внутри Tera <div> И 
не вложен в другой тег: 


<div> 

<a href="link1.html">CcŁuka 1</a><br> 

<span><a href="link2.html">Ccurka 2</a></span> 
</div> 
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В этом примере только первая ссылка станет красного цвета, т. к. вторая ссылка 
расположена внутри тега <span>; 


Селектор1 + Селектор2 — элемент, соответствующий параметру Селектор2, KOTO- 
рый является соседним для элемента, соответствующего параметру Селектор1, 
и следует сразу после него: 


div + p { color: red } 

Цвет текста абзаца станет красным, если тег <р> следует сразу после элемента 
div: 

<аіу>Текст</аіу><р>Текст</р> 

Селектор1 ~ Селектор2 — элемент, соответствующий параметру Селектор2, кото- 


рый является соседним для элемента, соответствующего параметру Селектор1, 
и следует после него, причем необязательно непосредственно: 


дім ~ h6 { color: геа } 
Цвет текста заголовка станет красным, если тег <Һ6> следует за элементом div И, 
возможно, отделяется от него другими элементами: 


<аіу>Текст</аіу> 
<р>Тоже текст</р> 
<һб>Красный заголовок</һб> 


При необходимости можно составлять выражения из нескольких селекторов: 


div span а { color: геа } 


Цвет текста ссылки станет красным, если тег <a> расположен внутри тега <span>, 
а тот в свою очередь вложен в тег <div>: 


<div> 


<a ҺгеЁ="1іпк1.Һію1">Ссылка 1</a><br> 


<span> 
<a һгеҒ-"ІіпКк2.һет1">Ссылка 2</a><br> 
</span> 
</div> 
В этом примере только ссылка 2 будет красного цвета. 


2.3.2. Привязка к параметрам тегов 


Для привязки к параметрам тегов применяются следующие селекторы: 


o 


o 


[Параметр] -- элементы с указанным параметром: 
alid] { color: red } 
Цвет текста ссылки станет красным, если тег <а> имеет параметр іа: 


<a іа="1іпк1" Һгеғ="1іпк1.Һім1">Ссылка 1</а> 


[Параметр=' Значение ' 1 элементы, у которых параметр точно равен значению: 
a[href="link1.html"] { color: red } 
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Цвет текста ссылки станет красным, если параметр href тега <a> имеет значение 
"link1l.html"; 


o [Параметр^= "Значение ' | элементы, у которых значение параметра начинается 
с указанного значения: 


а [ПгеЕ^="11"] { color: red } 


Цвет текста ссылки станет красным, если значение параметра href тега <a> Ha- 
чинается с 11; 


o [Параметр$='Значение' ] элементы, у которых значение параметра оканчивает- 
ся указанным значением: 


a[href$=".html"] { color: red } 


Цвет текста ссылки станет красным, если значение параметра href тега <a> 
оканчивается на .html; 


O {параметр*='Значение'] элементы, у которых параметр содержит указанное 
значение: 
a[href*="link"] { color: геа } 


Цвет текста ссылки станет красным, если значение параметра href Tera <a> со- 
держит фрагмент link; 


П (параметр--"Слово" | — элементы, у которых параметр содержит указанное слово 
целиком (используется когда значением параметра являются слова, разделенные 
пробелами): 


a[class~="class2"] { color: red } 


Цвет текста ссылки станет красным, если параметр class Тега <a> содержит CJIO- 
BO class2: 


<a class="class1 class2 class3" href="link1.html">CcŁuika</a> 


п [Параметр |-"Значение" | элементы, у которых параметр точно равен значению 
или начинается с указанного значения после которого следует дефис: 


a[class|="class1"] { color: геа ) 


Цвет текста ссылки станет красным, если значение параметра class тега <a> рав- 
НО class1 ИЛИ ПОСЛЕ с1газ51 идет дефис и любое другое значение: 


<a class="class1" ҺкеЁ="1іпк1.Һім1">Ссылка 1</а> 
<a class="class1-new" ҺгеЁғ="1іпк2.Һію1">Ссылка 2</а> 


В этом примере обе ссылки будут красного цвета. 


2.3.3. Псевдоэлементы 


В качестве селектора могут быть также указаны следующие псевдоэлементы: 


O ::first-letter — задает стиль для первой буквы. Выделим первую букву всех 
абзацев: 


o 
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p::first-letter ( font-size: 150%; font-weight: bold; 
color: red } 


::ЕікзЕ-І1іпе--Ззадает стиль для первой строки: 


p::first-line { font-weight: bold; color: геа } 


<р>Красный полужирный текст<рг> 
Обычный текст</р> 


: :before И ::after — позволяют добавить текст в начало и в конец элемента CO- 
ответственно. Добавляемый текст должен быть указан в атрибуте content: 


р::реЕоге { content: "before " } 


p::after { content: " after" } 
<р>Текст</р> 
Результат: 


<р>реЁоге Текст after</p> 


Атрибут content может принимать следующие значения: 


О 
o 


О 


normal И none — не добавляют содержимого; 


строка — задает выводимый текст: 


р::реЕоге { content: "before " } 


attr (<Параметр>) — возвращает значение указанного параметра или пустую 
строку. Выведем после текста ссылки ОКІ -адрес внутри круглых скобок: 


a::after { content: "(" attr(href) ")"; margin-left: 1ем } 

url (<ОВЪ-адрес>) — задает ОЕГ.-адрес вставляемого объекта (например, изобра- 
жения): 

р::реЁоге { content: url (магкег.рпо); margin-right: 5px } 

open-quote — вставляет открывающую кавычку; 


close-quote — вставляет закрываюшую кавычку. Тип кавычек задается с по- 
мощью атрибута quotes: 


р { quotes: тит тит } 
р::реЕоге { content: open-quote; color: red } 
p::after { content: close-quote; color: red } 


no-open-quote — отменяет вставку открывающей кавычки; 
no-close-quote — отменяет вставку закрывающей кавычки: 


а::реҒоге { content: no-open-quote } 
q::after { content: no-close-quote } 


counter (<Переменная>) -- вставляет значение счетчика. Добавим перед каждым 
абзацем фрагмент "Абзац ", номер абзаца и фрагмент ": ": 
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body { counter-reset: mycounter } 
p::before { counter-increment: mycounter; 


content: "Абзац " counter (mycounter) 5» 
margin-right: 5px } 


Для управления счетчиком предназначены следующие атрибуты: 


O counter-reset — создает переменную и присваивает ей начальное значение: 


counter-reset: <Переменная>[ <Начальное значение>] 
counter-reset: попе 


Если начальное значение не задано, то используется значение 0: 
body { counter-reset: mycounter } 


O counter-increment увеличивает значение переменной на единицу или на ука- 
занную величину: 


counter-increment: <Переменная>| <Величина приращения>] 


counter-increment: попе 


Пример: 


р::Беіоге { counter-increment: mycounter; 
т тг 


content: "Абзац " counter (mycounter) gata 
margin-right: 5px } 


Сушествуют также следующие нестандартные псевдоэлементы: 
8: :рІасеһо1аег — Позволяет применить стили к тексту подсказки внутри поля: 


::-webkit-input-placeholder { color: геа } 
:-ms-input-placeholder { color: red } 


input [type="text"] 
input [type="text"] 
input [type="text"] : :-ms-input-placeholder { color: red } 
input [type="text"] ::-moz-placeholder { color: red } 

[ ] 


input [type="text"] ::placeholder color: red } 


<input type="text" placeholder="TekcT подсказки"> 


В этом примере мы воспользовались «вендорными» атрибутами, т. к. не все 
\еб-браузеры поддерживают псевдоэлемент : :р1асево14ех. Обратите внимание: 
вначале указываются «вендорные» атрибуты, а лишь затем стандартный атри- 
бут. Кроме того, нельзя объединять разные «вендорные» атрибуты в одном оп- 
ределении стиля. Поэтому мы несколько раз продублировали одинаковое опре- 
деление стиля с разными селекторами. «Вендорные» атрибуты Web-6paysepa 
Internet Explorer имеют префикс -пз-, Chrome и Зап — префикс -webkit-, 
Firefox — префикс -по2-; 
O ::selection— задает стиль для выделенного фрагмента: 


::-moz-selection { background: green } 
::selection { background: green } 


<р>Текст</р> 


В этом примере выделенный текст будет иметь зеленый цвет фона. 
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ПРИМЕЧАНИЕ 


В С55 2 названия псевдоэлементов начинались с двоеточия. В С55 3 они начинаются 
с двойного двоеточия, чтобы их можно было отличать от названий псевдоклассов. 


2.3.4. Псевдоклассы 


В CSS 3 качестве селектора могут быть также указаны следующие псевдоклассы: 


П :empty — пустой элемент, не имеющий никакого содержимого. Сделаем все myc- 
тые абзацы невидимыми: 


р:етреу { display: попе ) 


O :first-child— привяжет стиль к элементу, только если он относится K указан- 
ному типу и является первым дочерним элементом в контейнере. Увеличим раз- 
мер шрифта у абзацев, которые являются первыми элементами в контейнере: 


p:first-child ( font-size: larger } 


<div> 


<р>Этот абзац будет выведен увеличенным шрифтом, поскольку он 
является первым элементом в контейнере.</р> 
<р>А этот будет выведен шрифтом стандартного размера, поскольку 
он не является первым элементом в контейнере.</р> 
</div> 
<div> 
<Һһ1>Заголовок</Һ1> 
<р>Этот абзац будет выведен шрифтом стандартного размера, 
поскольку он не является первым элементом в контейнере.</р> 
</div> 


o :first-of-type — задает стиль для первого элемента в контейнере, относяще- 
гося к заданному типу. Увеличиваем размер шрифта у всех абзацев -- первых 
ПОТОМКОВ контейнеров: 


p:first-of-type { font-size: larger ) 


<div> 


<р>Этот абзац будет выведен увеличенным шрифтом, поскольку он 
является первым абзацем в контейнере. </р> 
<р>А этот будет выведен шрифтом стандартного размера.</р> 
</div> 
<div> 
<Һ1>Заголовок</Һ1> 
<р>Этот абзац будет выведен увеличенным шрифтом, поскольку он 


является первым абзацем в контейнере.</р> 
</div> 


O :last-child — привяжет стиль к элементу, только если он относится к указан- 
ному типу и является последним дочерним элементом в контейнере; 


o 


o 
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: Llast-of-type — задает стиль для последнего элемента в контейнере, относяще- 
гося к заданному типу; 


:һЕһ-сһ114(<м>) -- привяжет стиль к элементу, только если он относится к yka- 
занному типу и является точно N-M по счету элементом в контейнере (нумерация 
элементов начинается с 1). Увеличим размер шрифта у абзацев, которые являют- 
ся вторыми потомками контейнеров: 


р:пёһ-сһі1а (2) { font-size: larger } 


<div> 
<р>Этот абзац будет выведен шрифтом стандартного размера.</р> 


<р>А этот будет выведен увеличенным шрифтом.</р> 
</div> 
<div> 

<Һ1>Заголовок</Һһ1> 

<р>Этот абзац также будет выведен увеличенным шрифтом.</р> 
</div> 


Вместо числа можно указать значения odd (все нечетные номера), even (Все чет- 
ные номера) или выражение Ап-в. Например, выражение 2n является аналогом 
значения even, а выражение 2n+1 — аналогом значения odd; 


:nth-last-child(<N>) — привяжет стиль к элементу, только если он относится 
к указанному типу и является точно N-M по счету элементом в контейнере, счи- 
тая с конца; 


:nth-of-type (<N>) — задает стиль для м-го элемента в контейнере, относящегося 
к указанному типу. Увеличим размер шрифта у каждого второго абзаца в кон- 
тейнере: 


p:nth-of-type(2) { font-size: larger } 


<div> 
<р>Этот абзац будет выведен шрифтом стандартного размера.</р> 


<р>А этот будет выведен увеличенным шрифтом.</р> 
</div> 
<div> 
<Һ1>Заголовок</Һһ1> 
<р>Этот абзац будет выведен шрифтом стандартного размера.</р> 


<р>А этот будет выведен увеличенным шрифтом.</р> 
</div> 


:nth-last-of-type (<N>) — задает стиль для N-TO элемента указанного типа B KOH- 
тейнере, считая с конца; 


:only-child — привяжет стиль к элементу, только если он относится к указан- 
ному типу и является единственным элементом в контейнере. Увеличим размер 
шрифта y абзаца, который является единственным элементом в контейнере: 


p:only-child { font-size: larger } 
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<div> 


<р>Этот абзац будет выведен увеличенным шрифтом.</р> 
</div> 
<div> 
<p>A этот будет выведен шрифтом стандартного размера.</р> 
<р>И этот тоже.</р> 
</div> 
<div> 
<Һһ1>Заголовок</Һ1> 
<р>И этот абзац будет выведен шрифтом стандартного размера.</р> 
</div> 


С :only-of-type — задает стиль для единственного элемента указанного типа 
в контейнере. Увеличим размер шрифта у каждого единственного абзаца в кон- 
тейнере (при этом там могут находиться элементы других типов): 


р:оп1у-оЕ-буре { font-size: larger } 


<div> 


<р>Этот абзац будет выведен увеличенным шрифтом.</р> 
</div> 
<div> 
<p>A этот будет выведен шрифтом стандартного размера.</р> 
<р>И этот тоже.</р> 
</div> 
<div> 
<Һһ1>Заголовок</Һ1> 
<р>Этот абзац будет выведен увеличенным шрифтом.</р> 
</div> 


o :target — «якорь», к которому был выполнен переход по внутренней гипер- 
ссылке. Сделаем цвет текста целевого элемента красным: 


:target { color: red } 


<div> 
<Һ1 іа-"Һеадеуү">Заголовок</Һ1> 
<р id="txt">TekcT абзаца</р> 
<a Һгеғ="#һеадег">Перейти к элементу һеайег</а> 


<a href=" #txt">IlepeňTtn к элементу txt</a> 
</div> 


Попробуйте перейти по гиперссылкам, и цвет текста заголовка или абзаца станет 
красным; 


О : root — корневой элемент документа; 
O :1:ок — непосещенная гиперссылка: 


a:link { color: #000000 } 


o 


o 


o 
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:visited — посещенная гиперссылка: 


a:visited { color: #000080 } 


:active — активная гиперссылка или другой элемент, над которым была нажата 
и удерживается нажатой кнопка мыши: 


a:active ( color: #FF0000 } 
p:active { color: #FF0000 } 


: hover — Гиперссылка, на которую указывает курсор мыши или другой элемент, 
над которым находится указатель мыши: 


a:hover { color: green; text-decoration: попе } 
p:hover { color: #FF0000 } 


: focus — гиперссылка или элемент управления, имеющий фокус ввода. При 
получении фокуса ввода сделаем фон текстового поля зеленым, а цвет текста 
белым: 


input [type="text"] :Еосаз { background: green; color: white } 


<input type="text"> 
: enabled — элемент управления, доступный для пользователя; 


:disabled — элемент управления, недоступный для пользователя (тег которого 
содержит параметр disabled). Зададим для текста недоступных элементов 
управления серый цвет: 


input:disabled, select:disabled, textarea:disabled ( 
со1ок: #сссссс } 


:геаа-оп1у — элемент управления, доступный только для чтения (тег которого 
содержит параметр readonly): 


input:-moz-read-only { background-color: #сссссс } 
input:read-only { background-color: #сссссс } 


Этот псевдокласс не поддерживается браузером Internet Explorer. 


: read-write — элемент управления, доступный для чтения и записи (тег которо- 
го не содержит параметра readonly): 


іприе:-по2-геай-мгіже { background-color: #сссссс } 
input:read-write { background-color: #сссссс } 


Этот псевдокласс не поддерживается браузером Internet Explorer. 


: required — обязательный элемент управления (тег которого имеет параметр 
required); 


:optional — необязательный элемент управления (тег которого не имеет napa- 
метра required); 


: valid — элемент управления, в котором указано корректное значение; 
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П :іһуа1іа — элемент управления, в котором указано некорректное значение: 


input:invalid { color: red ) 


o :in-range — поле ввода числового значения или регулятор, в котором указано 
корректное значение, укладываюшееся в заданный диапазон; 


С :out-of-range — поле ввода числового значения или регулятор, в котором ука- 
зано некорректное значение, не укладывающееся в заданный диапазон: 


input:out-of-range { color: red } 


<input type="number" min="0" max="10"> 
О :сһескеа — установленный флажок или переключатель: 


input [іуре="сһескрох"] :сһескеа + span { color: green } 


<input type="checkbox" сһескеа><зрап>Текст</зрап> 


O :default — элемент управления по умолчанию (например, кнопка отправки 
формы); 
O :indeterminate — элемент управления в неопределенном состоянии: 


input:indeterminate + span { color: gray ) 


<input type="checkbox" id="check1"><span>TekcT</span> 
<script> 


document .getElementById ('check1').indeterminate = true; 
</script> 


Псевдокласс :not стоит особняком. Он позволяет привязать стиль к любому эле- 
менту страницы, не удовлетворяющему заданным условиям. Вот формат записи 
этого псевдокласса: 


<Основной селектор>:пої (<Селектор выбора>) 


Стиль будет привязан к элементу \/еБ-страницы, удовлетворяющему основному 
селектору и не удовлетворяющему селектору выбора: 


p:not (:first-child) { font-size: larger } 


OTOT CTHJIb будет применен лишь к абзацам, не являющимся первыми дочерними 
элементами в контейнерах. 


2.4. Форматирование шрифта 


Каскадные таблицы стилей позволяют задать название и размер шрифта, его стиль 
и «жирность», а Также цвет текста. Кроме того, можно указать несколько имен 
шрифтов и одно из названий альтернативных семейств — ведь на компьютере 
пользователя может не быть нужного шрифта. 
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2.4.1. Имя шрифта 


Имя шрифта позволяет задать атрибут font-family: 
р 1 font-family: "Arial" } 
В ряде случаев шрифт может отсутствовать на компьютере пользователя. Поэтому 


лучше указывать несколько альтернативных шрифтов. Имена шрифтов при этом 
указываются через запятую: 


р { font-family: "Verdana", "Tahoma" } 
Можно также указать одно ИЗ пяти типовых семейств шрифтов: serif, sans-serif, 
cursive, fantasy ИЛИ monospace 


р { font-family: "Verdana", "Tahoma", sans-serif } 


2.4.2. Стиль шрифта 
Стиль шрифта позволяет задать атрибут font-style. Он может принимать следую- 
щие значения: 
С normal — нормальный шрифт: 

р font-family: "Arial"; font-style: normal } 
С italic — курсивный шрифт: 


р font-family: "Arial"; font-style: italic } 


П oblique — наклонный шрифт: 


р font-family: "Arial"; font-style: oblique } 


2.4.3. Размер шрифта 


Размер шрифта позволяет задать атрибут font-size: 

.text1 ( font-size: 12рі; font-family: "Arial" } 

Можно указать абсолютную величину или одну из типовых констант: xx-small, 
х-зша11, small, medium, large, x-large ИЛИ xx-large: 

.text1 ( font-size: large; font-family: "Arial" } 

Кроме того, можно указать относительную величину (например, значение B mpo- 
центах) или одну из двух констант: larger ИЛИ smaller: 


.Сехе1 ( font-size: 150%; font-family: "Arial" } 
.Сехе2 { font-size: smaller; font-family: "Arial" } 


2.4.4. Цвет текста 


Цвет текста позволяет задать атрибут color: 


.text1 ( font-size: 12pt; font-family: "Arial"; color: геа } 
.text2 ( font-size: 12рі; font-family: "Arial"; color: #00FF00 } 
.text3 { font-size: 12pt; font-family: "Arial"; color: rgb(255, 0, 0) } 
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Можно также указать значение transparent, означающее прозрачный цвет: 


.СехЕ1 { color: transparent } 


2.4.5. Жирность шрифта 


Управлять жирностью шрифта позволяет атрибут font-weight. Он может прини- 
мать следующие значения: 


О 100, 200, 300, 400, 500, 600, 700, 800, 900 — значение 100 соответствует самому 
бледному шрифту, а 900 — самому жирному: 


р font-family: "Arial"; font-style: italic; font-weight: 700 } 
П normal -- нормальный шрифт. Соответствует значению 400: 

р font-family: "Arial"; font-weight: normal } 
С bold — полужирный шрифт. Соответствует значению 700: 

р font-family: "Arial"; font-weight: bold } 
С lighter — менее жирный, чем у родительского элемента: 

p font-family: "Arial"; font-weight: lighter } 


П bolder — более жирный, чем у родительского элемента: 


р font-family: "Arial"; font-weight: bolder } 


2.4.6. Вид строчных букв 


Вид строчных букв задает атрибут font-variant. Он может принимать следующие 
значения: 


O normal — значение по умолчанию: 


р { font-family: "Arial"; font-variant: normal } 


С small-caps — строчные буквы отображаются прописными буквами уменьшен- 
ного размера: 


р { font-family: "Arial"; font-variant: small-caps } 


2.4.7. Одновременное указание 
характеристик шрифта 


Задать все характеристики шрифта одновременно позволяет атрибут font: 


font: [font-style ][font-variant ][font-weight ][font-stretch ] 
font-size[/line-height] font-family 


Параметр line-height задает вертикальное расстояние между базовыми линиями 
двух строк, а параметр font-stretch — ширину букв шрифта: 


р { font: italic small-caps bold 12pt/normal "Arial" } 
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Обязательными являются только параметры font-size И font-family: 


p { font: 12pt "Verdana", "Tahoma", sans-serif } 


2.4.8. Загружаемые шрифты 


Помимо шрифтов, установленных на компьютере, и типовых семейств шрифтов, 
для вывода текста на страницах мы можем использовать загружаемые шрифты. 
Такой шрифт хранится в виде файла на \!еБ-сервере и загружается самим Web- 
браузером. 


Загружаемый шрифт указывается с помощью правила font-face: 


@Ғопё-Ғасе ( 
font-family: <Имя, под которым загружаемый шрифт будет доступен в 
таблице стилей>; 
src: url ("<0КІ-адрес файла со шрифтом>") 
} 


Пример: 
@Ғопі-Ғасе ( 

font-family: MyFont; 

src: url("/fonts/myfont.ttf") 
} 


Загружаем шрифт, храняшийся в файле myfont.ttf, который находится B папке 
fonts В корне сайта, и задаем для него имя муҒопе. После этого мы можем использо- 
вать загруженный шрифт где угодно, указав заданное для него имя и альтернатив- 
ный шрифт или семейство шрифтов для М№еб-браузеров, не сумевших загрузить 
шрифт: 

р { font-family: MyFont, sans-serif } 

Все современные \еБ-браузеры поддерживают загружаемые шрифты, сохранен- 
ные в форматах TTF и \ОЕЕ. С другими форматами лучше не связываться, т. к. 


они либо поддерживаются не всеми \еЬ-браузерами, либо при их использовании 
могут возникнуть проблемы. 


2.5. Форматирование текста 


Для текстовых фрагментов, кроме указания характеристик шрифтов, можно задать 
некоторые дополнительные параметры: расстояние между символами, словами 
и строками, вертикальное и горизонтальное выравнивание, отступ первой строки. 


2.5.1. Расстояние между символами в словах 


Расстояние между символами текста задает атрибут letter-spacing. Он может при- 
нимать следующие значения: 
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С normal — значение по умолчанию: 
р { letter-spacing: normal; font-weight: normal } 
O величина B поддерживаемых CSS единицах: 


р { font-size: 12pt; color: red; letter-spacing: 5mm } 


2.5.2. Расстояние между словами 


Расстояние между словами задает атрибут word-spacing. Он может принимать сле- 
дующие значения: 


С normal — значение по умолчанию: 
р { word-spacing: normal; font-weight: normal } 
O величина B поддерживаемых CSS единицах: 


р { font-size: 12pt; color: red; word-spacing: 5mm } 


2.5.3. Отступ первой строки 


Отступ для «красной строки» задает атрибут text-indent. Может задаваться абсо- 
лютная или относительная величина отступа: 


р { text-indent: 10mm; font-style: italic; font-weight: normal } 


2.5.4. Вертикальное расстояние между строками 


Вертикальное расстояние между базовыми линиями двух строк задает атрибут 
line-height. Он может принимать следующие значения: 


П normal — значение по умолчанию: 
р { line-height: normal; font-weight: normal } 
П величина B поддерживаемых CSS единицах: 


р { font-size: 120%; color: red; font-family: "Arial"; 
line-height: 5m } 


2.5.5. Горизонтальное выравнивание текста 


Горизонтальное выравнивание текста задает атрибут text-align. Он может прини- 
мать следующие значения: 
O center — выравнивание по центру: 
<р style="text-align: сепіег">Абзац с выравниванием 
по центру</р> 
O left— выравнивание по левому краю: 


<р style="text-align: ІеГЕ">Абзац с выравниванием 
по левому краю</р> 
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п right — выравнивание по правому краю: 


<р style="text-align: гідһё">Абзац с выравниванием 
по правому краю</р> 


O justify — выравнивание по ширине (по двум сторонам): 


<р style="text-align: јиѕііѓҒу">Абзац с выравниванием 
по ширине</р> 


Горизонтальное выравнивание последней строки текста задает атрибут text-align- 
last. Он может принимать следующие значения: 


П auto— совпадает со значением атрибута text-align, но при значении justify 
выравнивание последней строки будет по началу блока; 


start — по началу блока (зависит от направления текста); 
end — по концу блока (зависит от направления текста); 
left — по левому краю; 

right — по правому краю; 


center — по центру; 


пиооч 


justify — по ширине (по двум сторонам). Если последняя строка содержит одно 
слово, то выполняется выравнивание по началу блока. 


Пример: 
р { width: 200px; 


text-align: justify; text-align-last: center } 


<р>Атрибут text-align-last задает выравнивание последней строки</р> 


2.5.6. Вертикальное выравнивание текста 


Вертикальное выравнивание текста относительно элемента-родителя -- например, 
ячейки таблицы -- задает атрибут vertical-align. Он может принимать следуюцие 
значения: 


П baseline — по базовой линии: 

са font-size: 12pt; color: гей; vertical-align: baseline } 
О middle — по центру: 
са font-size: 12рі; color: геа; vertical-align: middle } 


О top — по верху: 


са font-size: 12рі; color: red; vertical-align: top 


ОС bottom — по низу: 


са font-size: 12рі; color: red; vertical-align: bottom } 


Атрибут vertical-align работает CO строчными элементами и ячейками таблицы, 
поэтому если попробовать выполнить вертикальное выравнивание текста внутри 
элемента div или другого блочного элемента, то ничего не получится. 
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Со строчными элементами можно также использовать следующие значения: 
С ѕор — используется для создания нижних индексов (размер шрифта не умень- 
шается): 
<р> 
Н<зрап style="vertical-align: sub; font-size: 0.7ет">2</ѕрап>о 
</p> 


С super — используется для создания верхних индексов (размер шрифта не 
уменьшается): 
<р> 


т<ѕрап style="vertical-align: зарег; font-size: 0.7em">3</span> 
</p> 


o text-top — выравнивание по верху текстовой строки; 


O text-bottom — выравнивание по низу текстовой етроки: 


<р> 

<img alt="" src="foto.gif" height="100" 
style="border: 1рх red soliq"> 

Строка 


<span style="vertical-align: text-top; font-size: 0.бет"> 
text-top</span> 
<span style="vertical-align: text-bottom; font-size: 0.6em"> 
text-bottom</span> 
<span style="vertical-align: top; font-size: 0.6em">top</span> 


<span style="vertical-align: bottom; font-size: 0.6em"> 
bottom</span> 


<span style="vertical-align: middle; font-size: 0.6em"> 
middle</span> 
Строка</р> 


С величина в поддерживаемых CSS единицах: 


<р>Строка 

<span style="vertical-align: 20px; font-size: 0.бем"> 
20px</span> 

<span style="vertical-align: -120%; font-size: 0.6em"> 
-120%</span> 

Строка</р> 


2.5.7. Подчеркивание, надчеркивание 

и зачеркивание текста 

Подчеркнуть, надчеркнуть или зачеркнуть текст позволяет атрибут text- 
decoration. Он может принимать следующие значения: 

П попе — обычный текст (по умолчанию): 


<р style="text-decoration: попе">Текст</р> 
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O underline — подчеркивает текст: 


<р style="text-decoration: цпаег1іпе">Подчеркнутый текст</р> 


O overline — проводит линию над текстом: 


<р style="text-decoration: оуег1іпе">Надчеркнутый текст</р> 


О line-through — зачеркивает текст: 


<р style="text-decoration: 1іпе-іһгоцодһ">Зачеркнутый текст</р> 
В некоторых Web-6paysepax можно указать дополнительные атрибуты: 


O text-decoration-color — задает цвет линии: 


р { text-decoration: underline; text-decoration-color: red } 


O text-decoration-line — ТИП ЛИНИИ: none, underline, overline ИЛИ line-through: 


p { text-decoration-line: underline; text-decoration-color: red } 


П text-decoration-style — СТИЛЬ линии: 
е 5о114-- линия отображается сплошной линией; 
е dotted — пунктирная линия; 
е dashed — штриховая линия; 
өе double — двойная линия; 
е wavy — волнистая линия. 
Пример: 


р { 
text-decoration-line: underline; 
text-decoration-color: red; 
text-decoration-style: double 


} 
B атрибуте text-decoration можно указать сразу несколько значений: 


text-decoration: text-decoration-line text-decoration-style 
text-decoration-color 


Пример: 


р { text-decoration: underline геа wavy ) 


2.5.8. Изменение регистра символов 


Изменить регистр символов позволяет атрибут text-transform. Он может прини- 
мать следующие значения: 


О capitalize — делает первую букву каждого слова прописной; 


П uppercase — преобразует все буквы в прописные; 
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П lowercase — преобразует все буквы в строчные; 

O none — без преобразования. 

Пример: 

<Һ1 style="text-transform: саріса112е">заголовок из 
нескольких слов</Һ1> 

<Һ1 style="text-transform: аррегсазе">заголовок2</Һ1> 
<Һ1 style="text-transform: 1омексазе">ЗАГОЛОВОКЗ</Һ1> 
Результат: 


Заголовок Из Нескольких Слов 
ЗАГОЛОВОК2 
заголовок3 


2.5.9. Обработка пробелов между словами 


Установить тип обработки пробелов позволяет атрибут white-space. По умолчанию 
несколько пробелов подряд выводятся в окне \!еБ-браузера как один пробел. Атри- 
бут может принимать следующие значения: 


П normal — текст выводится стандартным образом: 
<р style="white-space: normal"> 
Строка 1 
Строка 2 
</р> 
Результат в окне УУер-браузера: 
Строка 1 Строка 2 
П рге-- сохраняются все пробелы и переносы строк. Текст автоматически на 
новую строку не переносится: 


<р style="white-space: рге"> 


Строка 1 
Строка 2 
</р> 


Результат в окне УУер-браузера: 


Строка 1 
Строка 2 


С почгар-- переносы строк в НТМГ-коде игнорируются. Текст автоматически 
на новую строку не переносится. Но если внутри строки содержится тег <br>, то 
он вставляет перенос строки: 
<р style="white-space: помгар"> 
Строка 1 
Строка 2<г> 
Строка 3 
</р> 
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Результат в окне УУер-браузера: 


Строка 1 Строка 2 
Строка 3 


o pre-line — переносы строк сохраняются, а пробелы игнорируются. Если текст 
не помещается на строке, то он будет автоматически перенесен на новую строку: 


<р style="white-space: pre-line"> 
Строка 1 

Строка 2<br> 

Строка 3 

</р> 


Результат в окне УУер-браузера: 


Строка 1 
Строка 2 
Строка 3 


П рхе-игар — сохраняются все пробелы и переносы строк. Если текст не помеща- 
ется на строке, то он будет автоматически перенесен на новую строку: 


<р style="white-space: pre-wrap"> 
Строка 1 

Строка 2<г> 

Строка 3 

</р> 


Результат в окне УУер-браузера: 


Строка 1 
Строка 2 


Строка 3 


2.5.10. Перенос слов 


Управлять переносом слов позволяют следующие атрибуты: 


С hyphens — задает способ вставки символов переноса. Чтобы атрибут правильно 
работал, необходимо указать язык текста в параметре lang (1апд-"ға") для тега 
<html> или для абзаца. Атрибут может принимать значения попе (символы пере- 
носа не добавляются), manual (символ переноса вставляется только при наличии 
в тексте мягких переносов &ѕһу;) и auto (автоматическая расстановка перено- 
сов): 

p { width: 200px; hyphens: auto } 
Атрибут полноценно работает только B Firefox. 


п word-wrap И оуегЕ1ом-икар -- задают способ вставки символов новой строки 
в длинные слова, не помещающиеся в строку по ширине. Могут принимать зна- 
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чения normal (символ НОВОЙ етроки автоматически не вставляется, и чтобы по- 
метить место вставки, нужно использовать тег <wbr> или символ мягкого nepe- 
носа &shy;) И break-word (автоматическая вставка символа новой строки — вна- 
чале длинное слово переносится на отдельную строку и только потом, если сло- 
во не помещается, вставляется символ НОВОЙ строки): 


Жрі { width: 150px; word-wrap: Бгеак-мога } 


<р іа="р1">текст оченьдлинныйтекст</р> 


Результат: 


текст 
оченьдлинныйтекст 


мога-ргеак — задает способ вставки символов новой строки в длинные слова, не 
помещающиеся в строку по ширине. Может принимать значения normal (символ 
НОВОЙ строки автоматически не вставляется, и чтобы пометить место вставки, 
нужно использовать тег <wbr> или символ мягкого переноса &shy;) И break-all 
(автоматическая вставка символа новой строки): 


#р2 1 width: 150px; word-break: ргеак-а11 ) 


<р іа="р2">текст оченьдлинныйтекст</р> 
Результат: 

текст оченьдлинныйт 

екст 


2.5.11. Направление вывода текста 


Направление вывода текста в CSS 3 задает атрибут writing-mode. Его допустимые 
значения: 


o 


horizontal-tb — по горизонтали слева направо и сверху вниз (значение по 
умолчанию): 


р { width: 200px; height: 200px; writing-mode: horizontal-tb } 
хегііса1-гі — По вертикали сверху вниз и справа налево: 
р width: 200px; height: 200px; writing-mode: мегбіса1-г1 } 


хегііса1-1г — По вертикали сверху вниз и слева направо: 


р width: 200px; height: 200px; writing-mode: vertical-lr } 


sideways-lr — по вертикали снизу вверх и слева направо (работает только B по- 
следних версиях Firefox). 


2.6. Отступы 


Любой элемент \еЬ-страницы занимает в окне \еЬ-браузера некоторую прямо- 
угольную область. Причем эта область имеет как внутренние, так и внешние отсту- 
пы. Внутренний отступ — это расстояние между элементом страницы и реальной 
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или воображаемой границей области. Внешний отступ — это расстояние между 
реальной или воображаемой границей и другим элементом \еБ-страницы, точнее 
сказать, между границей и крайней точкой внешнего отступа другого элемента 
\УеБ-страницы. 


По умолчанию нижний внешний отступ одного блочного элемента может объеди- 
няться с верхним внешним отступом другого блочного элемента — при этом мы 
получим не сумму внешних отступов, а наибольшее значение. Такой эффект можно 
наблюдать при использовании абзацев. Если объединение не произойдет, то отступ 
между абзацами увеличится в два раза. Справа и слева внешние отступы никогда не 
объединяются. 


Чтобы увидеть структуру блочной модели, воспользуемся панелью Инструменты 
разработчика Web-6paysepa Firefox: открываем вкладку Инспектор и справа ne- 
реходим на вкладку Разметка. Как можно видеть на рис. 2.3, вначале идут размеры 
элемента, затем внутренние отступы (padding), далее граница (border) и внешние 
отступы (margin). 


a Инструменты разработчика - Отступы - file:///C:/book/test.html = 
Г; БЕЙ 7222 ІГІ консо D Отладч {} Стил @, Профай/ Я Памя = Се В Хранили Е” Я Е ЗЫП 


+ Поиск в HTML æ El Правила Вычислено Анимации 


<!DOCTYPE htmi> Сетка 
<html lang="ru"> 
j і Блочная модель 


<body> 
<р>Абзац 2</p> 
</body> 
</html> 


1011x280 static 
свойства блочной модели 

box-sizing content-box 

display block 

float none 

line-height 20px 

position static 


html body D p | z-index auto 


Рис. 2.3. Структура блочной модели 


2.6.1. Внешние отступы 


Отступы одного элемента У/еб-страницы от другого можно задать с помощью ат- 
рибутов margin-left, margin-right, margin-top И margin-bottom: 


O margin-left — внешний отступ слева: 


body { margin-left: 0 } 
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О margin-right — внешний отступ справа: 
body { margin-right: 5% } 

О margin-top — внешний отступ сверху: 
body { margin-top: 15m } 

О margin-bottom — внешний отступ снизу: 
body { margin-bottom: 20px } 


Как можно видеть, для этих атрибутов могут быть заданы абсолютные или относи- 
тельные значения. Более ТОГО, атрибуты могут иметь и отрицательные значения. 
Убрать все внешние отступы можно с помощью такой строки кода: 

body { margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0 } 

C ПОМОЩЬЮ атрибута margin МОЖНО задать все внешние отступы за один раз: 


margin: <top> <right> <bottom> <left> 
margin: <top> <right n left> <bottom> 
margin: <top n bottom> <right n left> 
margin: <top n right n bottom n left> 


Например: 

body { margin: 15mm 5% 20px 0 } 

Для совпадающих значений можно записать одно значение: 

body { margin: 0 } 

В качестве значения вместо конкретной величины можно указать слово auto, KOTO- 
рое означает, что размер внешних отступов автоматически рассчитывается Web- 


браузером. Выполним горизонтальное выравнивание блоков по центру и по правой 
стороне: 

div { width: 100px; height: 100px; background: green } 

div.cls1 { margin: 0 auto } 

div.cls2 { margin: 0 0 0 auto } 


<div с1аѕѕ="с151">Текст</аіу> 
<div с1аѕѕ="с132">Текст</аіу> 


2.6.2. Внутренние отступы 


Задать отступы от элемента \!еБ-страницы до его рамки (если она есть) можно 
с ПОМОЩЬЮ атрибутов padding-left, padding-right, padding-top И padding-bottom. 
Например, ими задается расстояние между текстом и рамкой ячейки таблицы: 


П padding-left — внутренний отступ слева: 
са { padding-left: 0 } 

О padding-right — внутренний отступ справа: 
td { padding-right: 50px } 
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С padding-top — внутренний отступ сверху: 
td { padding-top: 15m } 
О padding-bottom — внутренний отступ снизу: 
td { padding-bottom: 20px } 
Как можно видеть, для этих атрибутов могут быть заданы абсолютные или относи- 
тельные значения. 
С помощью атрибута padding можно задать все внутренние отступы за один раз: 


padding: <top> <гіаһе> <bottom> <left> 
padding: <top> <right n left> <bottom> 
padding: <top n bottom> <right n left> 
padding: <top n right n bottom n left> 


Например: 


td { padding: 15mm 50px 20px 0 } 


Совпадающие отступы можно задать и короче: 


td { padding: 5px } 


2.7. Рамки 


Как вы уже знаете, любой элемент УУеВ-страницы занимает в окне Web-6paysepa 
некоторую прямоугольную область. Содержимое этой области может быть окру- 
жено рамкой. Иными словами, рамки могут иметь не только таблицы, но и любые 
элементы УУер-страницы, например абзацы. 


2.7.1. Стиль линий рамки 


Задать тип линий рамки можно с помощью атрибутов border-left-style (левая 
ЛИНИЯ), border-right-style (правая линия), border-top-style (верхняя линия) и 
border-bottom-style (нижняя линия). Атрибуты могут принимать следующие зна- 
чения: 


С попе — линия не отображается; 


O hidden— если ДЛЯ таблицы задан атрибут border-collapse со значением 
collapse, То граница вокруг ячейки со значением hidden не будет отображаться. 
Для других элементов значение имеет тот же эффект, ЧТО И попе; 


solid — линия отображается сплошной линией; 
dotted — пунктирная линия; 

dashed — штриховая линия; 

double — двойная линия; 


groove — вдавленная рельефная линия; 


пспчааЧчоаов 


ridge — выпуклая рельефная линия; 
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С inset — весь блок элемента отображается, как будто он вдавлен в лист; 
П outset — весь блок элемента отображается, как будто он выдавлен из листа. 
Эти атрибуты могут быть объединены в одном атрибуте border-style: 


border-style: <top> <гіаһе> <bottom> <left> 
border-style: <top> <right n left> <bottom> 
border-style: <top n bottom> <right n left> 
border-style: <top n right n bottom n left> 


Если все значения совпадают, можно указать это значение один раз: 


р { border-style: dotted } 


В качестве примера укажем стили линий рамки для разных элементов Web-crpa- 
ницы (листинг 2.6). 


Листинг 2.6. Стили линий рамки 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 

<title>Ctuzn линий pamkn</title> 

<style type="text/css"> 

div, p { width: 300px; height: 100px; margin: 10px; 
border-width: 10px; padding: 5px } 
аіу.с151 { 


border-top-style: solid; 
border-right-style: dotted; 
border-bottom-style: double; 
border-left-style: dashed 

} 

div.cls2 { 
border-top-style: groove; 
border-right-style: ridge; 
border-bottom-style: ridge; 
border-left-style: groove 

} 

p.cls3 { border-style: outset } 

p.cls4 { border-style: inset } 

</style> 

</head> 

<body> 
<div class="cls1">solid dotted double dashed</div> 
<div class="cls2">groove ridge ridge groove</div> 
<р class="cls3">outset</p> 
<p class="cls4">inset</p> 

</body> 

</html> 
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Этот пример показывает, что указать тип рамки можно не только для границ табли- 
ЦЫ, НОИ ДЛЯ абзацев, а также для любых других элементов. 


2.7.2. Толщина линий рамки 


Задать толщину линий рамки можно с помощью атрибутов border-left-width 
(левая линия), border-right-width (правая линия), border-top-width (верхняя линия) 
И border-bottom-width (нижняя линия). 
Может быть задано абсолютное значение: 
div { 

border-style: solid; padding: 10px; 

border-top-width: 0; border-right-width: 5px; 

border-bottom-width: 10px; border-left-width: 15px 
} 


Также можно указать одно из предопределенных значений: 

С +һіһ — тонкая линия; 

С medium — средняя толщина линии; 

С єһіск — толстая линия. 

div { 
border-style: solid; padding: 10px; 
border-top-width: 0; border-right-width: thick; 
border-bottom-width: thin; border-left-width: medium 

} 

Эти атрибуты могут быть обьединены в одном атрибуте border-width: 


border-width: <top> <гіаһе> <bottom> <left> 
border-width: <top> <right n left> <bottom> 
border-width: <top n bottom> <right n left> 
border-width: <top n right n bottom n left> 


Если значения совпадают, можно указать их один раз: 


div { border-style: solid; padding: 10px; border-width: 3px } 


2.7.3. Цвет линий рамки 


Задать цвет линий рамки можно с помощью атрибутов border-left-color (левая 
ЛИНИЯ), border-right-color (правая линия), border-top-color (верхняя линия) и 
border-bottom-color (нижняя линия): 
div { 

border-style: solid; padding: 10px; 

border-top-color: green; border-right-color: #СССССС; 

border-bottom-color: black; border-left-color: red; 
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Как и в случае border-style И border-width, эти атрибуты можно объединить в один 
атрибут border-color: 


border-color: <top> <гіаһе> <bottom> <left> 
border-color: <top> <right n left> <bottom> 
border-color: <top n bottom> <right n left> 
border-color: <top n right n bottom n left> 
Вот пример указания одного цвета для всех границ: 


div { border-style: solid; padding: 10px; border-color: red } 


2.7.4. Одновременное задание характеристик рамки 

Если атрибуты рамки одинаковы для всех ее сторон, можно задавать их в одном 
атрибуте border: 

border: <width> <style> <color> 

Поскольку значение атрибута однозначно определяет, к какому именно компоненту 
он относится, то их можно указывать в произвольном порядке: 


div { border: red thin solid } 


Можно также указывать только отдельные значения: 


div { border: solid red } 


Чтобы одновременно задать характеристики рамки для одной стороны, следует 
воспользоваться атрибутами border-top (верхняя граница), border-right (правая 
граница), border-bottom (нижняя граница) и border-left (левая граница): 


border-top: <width> <style> <color> 
border-right: <width> <style> <color> 
border-bottom: <width> <style> <color> 
border-left: <width> <style> <color> 


Вот пример указания характеристик верхней границы: 


div { border-top: 1рх solid геа } 


2.7.5. Рамки со скругленными углами 


Одна из наиболее долгожданных новых возможностей С55 3 — скругление углов 
рамок и фона. Если рамка не задана, то происходит только скругление фона. 


Радиус скругления углов указывается с помощью атрибутов border-top-left-radius 
(левый верхний угол), border-top-right-radius (правый верхний угол), border- 
bottom-right-radius (правый нижний угол) и border-bottom-left-radius (левый 
нижний угол): 


border-top-left-radius: <Размер>[ <Размер>] 
border-top-right-radius: <Размер>[ <Размер>] 
border-bottom-right-radius: <Размер>[ <Размер>] 
border-bottom-left-radius: <Размер>[ <Размер>] 
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Если задать два значения радиуса скругления, то первое будет применено к гори- 
зонтальной четверти угла, а второе — к вертикальной четверти. Если задано одно 
значение. то оно будет применено к обеим четвертям: 
div { border: 1px solid red; height: 100px; padding: 10px; 
border-top-left-radius: 20px; 
border-top-right-radius: 20px 30px; 
border-bottom-right-radius: 20px; 
border-bottom-left-radius: 20px 30px 
} 


Указать радиус скругления сразу для всех углов рамки можно с помощью атрибута 
border-radius: 

border-radius: <Pamyc>[ / <Радиус>] 

Перед символом слэша задается радиус скругления для горизонтальной четверти 
углов, а после него — радиус скругления для вертикальной четверти: 


div { border: 1px solid red; height: 100px; padding: 10px; 
border-radius: 20px / 30px 
} 


Если после слэша значение не указать, то заданный радиус скругления будет при- 
мененик горизонтальной, ик вертикальной четвертям: 
div { border: 1px solid red; height: 100px; padding: 10px; 

border-radius: 20px 


} 


Параметр <Радиус> может быть задан следующими способами: 


<Радиус всех четырех углов> 

<top-left и bottom-right> <top-right и bottom-left> 
<top-left> <top-right n bottom-left> <bottom-right> 
<top-left> <top-right> <bottom-right> <bottom-left> 


Вот пример указания всех значений: 


div { border: 1рх solid red; height: 100px; padding: 10px; 
border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px 
} 


Этот пример аналогичен следующему, T. к. для обеих четвертей задано одинаковое 
значение: 


div { border: 1px solid red; height: 100px; padding: 10px; 
border-radius: 10px 20px 30px 40px 


2.7.6. Внешняя рамка 


Помимо обычной рамки, элемент может содержать и внешнюю рамку, причем 
внешняя рамка не входит в состав размера элемента. Если два элемента расположе- 
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ны рядом, то внешняя рамка отображается поверх второго элемента, а не сдвигает 
его в сторону. В отличие от обычной рамки, характеристики внешней рамки мы 
можем задать только для всех границ сразу. Кроме того, для нее нельзя указать 
скругление углов. 


Задать характеристики внешней рамки позволяют следующие атрибуты: 


П outline-style — стиль линии рамки. Можно указать те же самые стили, что и 
для обычной рамки (за исключением hidden): 


р { outline-style: double } 


П outline-color — цвет линии: 


р { outline-style: double; outline-color: red } 


С outline-width — толщина линии. Можно указать те же самые значения, что и 
для обычной рамки: 


р { outline-style: double; outline-width: 10px } 


O outline-offset — OTCTYII OT обычной границы элемента до внешней границы: 


р ( outline-style: solid; outline-width: 1px; 
outline-offset: 5px } 


Атрибут outline позволяет задать сразу несколько значений одновременно: 


outline: <outline-color> <outline-style> <outline-width> 
Пример: 
div 1 height: 100px; width: 500px; 

padding: 10px; margin: 20px; 

border: 10px green dotted; 


outline: red double 10px; 
outline-offset: 10px 


<div></div> 


2.8. Фон элемента 


Каскадные таблицы стилей позволяют задать цвет фона или использовать в качест- 
ве фона какое-либо изображение. Для фонового рисунка можно задать начальное 
положение и указать, будет ли рисунок прокручиваться вместе с содержимым Web- 
страницы. Кроме того, можно управлять повторением фонового рисунка, что по- 
зволяет получить интересные спецэффекты. Например, если в качестве фонового 
рисунка указать градиентную полосу с высотой, равной высоте элемента страницы, 
и шириной, равной 1-2 мм, а затем задать режим повторения только по горизонта- 
ли, то первоначальное изображение будет размножено по горизонтали, и мы полу- 
чим градиентную полосу любой ширины. 
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2.8.1. Цвет фона 


Задать цвет фона можно с помощью атрибута background-color: 


body { background-color: green } 
div { height: 100px; background-color: silver } 


В качестве значения атрибута можно использовать CJIOBO transparent, которое 
означает, что фон прозрачный: 


div { height: 100px; background-color: transparent ) 


2.8.2. Фоновый рисунок 


Задать интернет-адрес (URL) изображения, которое будет использовано в качестве 
фонового рисунка, можно с помощью атрибута background-image. Может быть ука- 
зан как абсолютный, так и относительный ЧВГ-адрес (относительно местоположе- 
ния таблицы стилей, а не документа): 


body { background-image: url(photo.jpg) } 
Можно указать несколько изображений через запятую: 


body { background-image: игі (рһоёо1.јрод), url (photo2.jpg) } 


В качестве значения атрибута можно использовать слово none. Оно означает, что 
фоновая заливка отключена: 


body { background-image: попе } 


2.8.3. Режим повторения фонового рисунка 


Режим повторения фонового рисунка задает атрибут background-repeat. Он может 
принимать следующие значения: 


П repeat — рисунок повторяется и по вертикали, и по горизонтали (по умолча- 
нию): 


body { background-image: игі (рһобо.јрд); 
БасКкагоцпа-гереае: repeat } 


п repeat-x — рисунок повторяется по горизонтали: 


body { background-image: ог1 (рһоёо.јрд); 
раскагоџпа-гереаї: repeat-x 


п repeat-y — рисунок повторяется по вертикали: 


body { background-image: url (рһобо.јрд); 
background-repeat: repeat-y 


П no-repeat — рисунок не повторяется: 


body { background-image: url (рһобо.јрд); 
background-repeat: no-repeat } 
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В С55 3 доступны два новых значения: 


С ѕрасе — повторяет изображение без обрезки и масштабирования, при этом 
заполняет оставшееся место пустым пространством между изображениями: 


body { background-image: url (рһобо.јрд); 
background-repeat: space } 


О round — повторяет изображение таким образом, чтобы поместилось целое число 
изображений без пустого пространства между ними, при этом изображения 
масштабируются: 


body { background-image: url (рһоёо.јрд); 
background-repeat: round } 


2.8.4. Прокрутка фонового рисунка 


Будет ЛИ фоновый рисунок прокручиваться вместе с документом, определяет атри- 
бут background-attachment. Он может принимать следующие значения: 


П scroll — фоновый рисунок прокручивается вместе с содержимым страницы (по 
умолчанию): 


body { background-image: url (рһоёо.јрд); 
background-repeat: no-repeat; 
background-attachment: scroll } 


С fixed — фоновый рисунок не прокручивается: 


body { background-image: url (photo.jpg); 
background-repeat: no-repeat; 


background-attachment: fixed } 


2.8.5. Положение фонового рисунка 


Начальное положение фонового рисунка задает атрибут background-position. В ka- 
честве значений атрибута задаются координаты в абсолютных единицах или в про- 
центах. Координаты указываются через пробел: 


body { background-image: игі (рһобо.јрд); background-repeat: no-repeat; 
background-attachment: fixed; background-position: 50% 50% } 


Кроме того, могут быть указаны следуюшие значения: 
О 1е%с--выравнивание по левому краю; 
О right — по правому краю; 


center — по центру; 


п 
О ғор — по верху; 
п 


bottom — ПО НИЗУ. 
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Пример: 


body { background-image: игі (рһобо.јрд); background-repeat: no-repeat; 
background-attachment: fixed; background-position: left center } 


2.8.6. Размеры фонового изображения 


Размеры фонового изображения в CSS 3 указывает атрибут background-size в виде 
двух значений, разделенных пробелом: первое значение задает ширину изображе- 
ния, второе — высоту. 


Растянем фоновое изображение на всю ширину страницы и на половину ее высоты: 

body { background-image: игі (рһобо.јрд); background-repeat: no-repeat; 
background-size: 100% 50% } 

Можно также указать следующие значения: 

П авео--не изменяет размеры фонового изображения (поведение по умолчанию); 


П cover — задает такие размеры фонового изображения, чтобы оно полностью TIO- 
крывало элемент страницы. При этом какие-то фрагменты изображения могут 
выйти за границы элемента; 


П сопёаіп — задает такие размеры фонового изображения, чтобы оно полностью 
помещалось в элементе страницы, занимая его целиком. При этом какие-то час- 
ти элемента могут быть не покрыты изображением. 


Заполним фоновым изображением все пространство страницы: 


body { background-image: игі (рһобо.јрд); background-repeat: no-repeat; 
background-size: cover } 


2.8.7. Режим позиционирования 
фонового изображения 
Если мы задали местоположение фонового изображения, то можем также указать, 


относительно чего оно будет позиционироваться. Для этого в С55 3 мы применим 
атрибут background-origin, задав одно из следующих его значений: 


o padding-box — изображение будет позиционироваться относительно границ 
внутренних отступов (поведение по умолчанию); 


O border-box — позиционирование фонового изображения будет ВЫПОЛНЯТЬСЯ 
относительно рамки элемента; 


С сопсепе-Бох — изображение будет позиционироваться относительно границ 
содержимого элемента. 


Позиционируем фоновое изображение относительно содержимого контейнера 
с идентификатором main: 


Жшаіп { padding: 10px; border: 10px red dashed; 
background-image: url (рһоёо.јрд); 
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background-position: center top; 
background-repeat: no-repeat; 
background-origin: border-box } 


2.8.8. Режим заполнения для фона 


Иногда полезно указать, какую часть элемента будет заполнять фон. За это в CSS 3 
отвечает атрибут background-clip, поддерживающий три значения: 
П content-box — фоном будет заполнена часть элемента, занятая его содержимым; 


п padding-box — фоном будет заполнена часть элемента, занятая содержимым и 
внутренними отступами; 


П border-box — фоном будет заполнен весь элемент (поведение по умолчанию). 


Заполним черным цветом лишь ту часть контейнера main, что занята собственно 
содержимым: 
#main { padding: 10px; border: 10px red dashed; 

color: white; background-color: black; 

background-clip: content-box } 


2.8.9. Одновременное задание характеристик фона 


Атрибут background является сокращенным вариантом для одновременного указа- 
ния значений атрибутов background-color, background-image, background-position, 
background-repeat, background-attachment И ДР. 


body { background: green url (рһоёо.јрд) no-repeat fixed left center } 
div { background: green } 


Обратите внимание на то, что во втором примере мы указали только цвет фона. 
Если остальные атрибуты не указаны, то они получают значения по умолчанию. 
Кроме того, поскольку значение атрибута в большинстве случаев однозначно опре- 
деляет, к какому именно компоненту он относится, то их можно указывать в произ- 
вольном порядке. 


2.9. Градиентные фоны 


В CSS 3, помимо заливки сплошным цветом и фоновым рисунком, существует воз- 
можность выполнить заливку фона линейным или радиальным градиентом. Гради- 
ентный фон указывают либо с помощью атрибута background-image, либо в составе 
атрибута background. 


2.9.1. Линейные градиенты 


В линейном градиенте переходящие друг в друга цвета распространяются по пря- 
мой из одной точки в другую. Точка, В которой градиент начинается, называется 
начальной, а точка, в которой он заканчивается, -- конечной. 
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Линейный градиент формируется с помощью функции linear-gradient (): 


linear-gradient([ [<Угол>][ to <Направление>] ,] 
<Цвет 1>[ <Положение 1>], ..., <Цвет N>[ <Положение N>]) 


Любой градиент должен иметь, по крайней мере, две ключевые точки, которые 
часто располагаются в его начальной и конечной точках. Если указаны только два 
цвета, то градиент станет распространяться по вертикали сверху вниз: первый цвет 
будет находиться в начальной точке, а второй - В конечной. 


Вот пример плавного перехода по вертикали от красного цвета до синего: 


#main ( height: 200px; border: Ірх геа solid; 
background-image: linear-gradient (red, blue) 


<div id="main"></div> 


Ключевая точка располагается на воображаемой прямой, проведенной между 
начальной и конечной точками градиента, и определяет, какой «чистый» цвет дол- 
жен присутствовать в этом месте. При этом цвета, которые будут присутствовать 
между ключевыми точками, сформируются переходом одного «чистого» цвета 
в другой. 

Ключевая точка характеризуется расстоянием между ней и начальной точкой гра- 
диента и, собственно, значением цвета. Положение ключевой точки обычно указы- 
вают в процентах, чтобы связать размеры градиента с размерами элемента, фоном 
которого он станет. Предыдущий пример мы можем записать следующим образом: 


background-image: linear-gradient (red 0%, blue 100%) 


Если положение первой ключевой точки градиента не указано, она будет находить- 
ся в начальной точке (0%). Если не указать положение последней ключевой точки, 
она будет находиться в конечной точке (100%). А если не указывать положения 
промежуточных ключевых точек, они выстроятся по градиенту на одинаковом рас- 
стоянии друг от друга: 


background-image: linear-gradient (red, green, blue) 


Эта запись эквивалентна такой: 


background-image: linear-gradient (red 0%, green 50%, blue 100%) 


Если ДЛЯ первой точки указано значение, отличное от 0%, то пространство от на- 
чальной точки до первой ТОЧКИ будет залито сплошным цветом первой точки. Если 
для последней точки указано значение, отличное от 100%, то пространство от 
последней точки до конечной точки будет залито сплошным цветом последней 
ТОЧКИ: 


background-image: linear-gradient (red 25%, green 75%) 
В этом примере пространство от 0% ДО 25% будет залито сплошным красным цветом, 


ОТ 25% ДО 75% — залито плавным градиентом от красного цвета до зеленого, а про- 
странство от 75% ДО 100% — залито сплошным зеленым цветом. 
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Направление, по которому будет распространяться градиент, можно указать сле- 
дующими способами: 


П ввиде значения угла между горизонталью и линией, по которой должен распро- 
страняться градиент. Этот угол отсчитывается по часовой стрелке. Для указания 
значения угла CSS 3 предлагает следующие единицы измерения: deg (градусы), 
rad (радианы), grad (грады) и turn (повороты). 


Вот пример градиента по горизонтали от черного цвета (слева) до белого (справа): 


background-image: linear-gradient (90deg, black, white) 


Если требуется отсчитывать угол против часовой стрелки, нужно указать отри- 
цательное значение. Вот пример градиента по горизонтали от черного (справа) 
до белого (слева): 


background-image: linear-gradient (-90deg, black, white) 


П с помошью одного из значений (или их комбинации через пробел), указанных 
после ключевого слова to: top (вверх), bottom (вниз), left (налево) и right 
(направо). В этом случае градиент будет распространяться в указанном направ- 
лении по горизонтали или вертикали. 


Вот пример градиента по вертикали снизу вверх: 


background-image: linear-gradient (to top, black, white) 


Если направление не указано, градиент будет распространяться сверху вниз (как 
будто для него было задано значение направления bottom): 


background-image: linear-gradient (to bottom, black, white) 
Пример градиента по горизонтали слева направо: 
background-image: linear-gradient (to right, black, white) 


Пример градиента по горизонтали справа налево: 


background-image: linear-gradient (to left, black, white) 


Можно указать комбинацию из двух значений, разделенных пробелом. В этом 
случае градиент будет распространяться по диагонали в угол, образованный 
смыканием указанных сторон. Вот пример градиента по диагонали от правого 
нижнего угла до левого верхнего угла: 


background-image: linear-gradient (to top left, black, white) 


Повторяюшийся линейный градиент можно создать с помощью функции 
repeating-linear-gradient (): 


repeating-linear-gradient([ [<Угол>][ to <Направление>] ,1 
<Цвет 1>[ <Положение 1>], ..., <Цвет N>[ <Положение N>]) 


Все параметры аналогичны одноименным параметрам функции linear-gradient (), 
но последняя точка будет конечной точкой градиента. 


Пример повторяюшегося линейного красно-синего градиента: 


background-image: repeating-linear-gradient (red, blue 100px) 
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Пример чередования красных и белых полос под углом 45 градусов: 


background-image: repeating-linear-gradient ( 
45deg, red, red 20px, white 20px, white 40px) 


2.9.2. Радиальные градиенты 


В радиальном градиенте переходяшие друг в друга цвета распространяются из на- 
чальной точки во все стороны, в конечном счете образуя своего рода эллипс (или 
круг). За конечную точку такого градиента принимается любая точка, расположен- 
ная на охватываюшем его воображаемом эллипсе. 


Радиальный градиент описывается функцией radial-gradient () по следующей схеме: 


radial-gradient( [[ [<Форма> ] [<Радиус> ] [<Размер> 1 1 
[ at <Положение начальной точки>],] 
<Цвет 1>[ <Положение 1>], ..., <Цвет N>[ <Положение N>]) 


Вот пример радиального градиента в форме эллипса от красного цвета (в центре 
элемента) до синего (по краям): 


#main { height: 200px; border: 1px геа solid; 
background-image: radial-gradient (red, blue) 


<div id="main"></div> 


Положение начальной точки радиального градиента (положение центра эллипса 
или круга) задается в том же формате, что и значение атрибута background-position 
(см. разд. 2.8.5). Если параметр <Положение начальной точки> не указан, то началь- 
ная точка будет располагаться в центре элемента. 


Пример смещения начальной точки в левый верхний угол: 
background-image: гааіа1-дгадіепі (at left top, геа, blue) 
Набор ключевых точек задается точно так же, какиу линейного градиента: 


background-image: radial-gradient (at 0 50%, 
red 0%, green 50%, blue 100%) 


Параметр <Форма> Может принимать два значения: 


С е111рве-- градиент эллиптической формы (значение по умолчанию): 


background-image: radial-gradient (ellipse, red, blue) 


По умолчанию эллипс, на основе которого формируется градиент, будет иметь 
то же соотношение сторон, что и элемент, фоном которого он станет. С по- 
мощью параметра <Радиус> можно указать другое соотношение сторон: 


background-image: radial-gradient (ellipse 150% 50%, red, blue) 


Первое значение задает радиус эллипса по оси X, a второй — по оси у. Ключевое 
СЛОВО ellipse можно не указывать: 


background-image: radial-gradient (150% 50%, red, blue) 
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П circle — градиент в форме круга: 
background-image: radial-gradient (circle at left top, red, blue) 
Параметр <Радиус> позволяет задать радиус круга: 
background-image: radial-gradient (circle 100px, red, blue) 


Ключевое слово circle в этом случае можно не указывать: 


background-image: radial-gradient (100px, red, blue) 
B параметре <Размер> можно указать размер градиента в виде одного из следующих 
значений: 


П сіозеве-віде-- градиент будет заканчиваться у самой близкой к его начальной 
точке стороны элемента страницы: 


background-image: radial-gradient (closest-side at 100px 30px, 
white, blue) 


O closest-corner — градиент будет заканчиваться у самого близкого к его началь- 
ной точке угла элемента страницы: 


background-image: radial-gradient (с1оѕеѕі-согпег at 100px 30px, 
white, blue) 


С farthest-side — градиент будет заканчиваться у самой дальней от его началь- 
ной точки стороны элемента страницы: 


background-image: radial-gradient (farthest-side at 100px 30px, 
white, blue) 


O farthest-corner — градиент будет заканчиваться у самого дальнего от его на- 
чальной точки угла элемента страницы (значение по умолчанию): 


background-image: radial-gradient (farthest-corner at 100px 30px, 
white, blue) 


Для градиента круглой формы нужно дополнительно указать слово circle: 


background-image: radial-gradient ( 
circle farthest-corner at 100px 30px, white, blue) 
Повторяюшийся радиальный градиент можно создать с помощью функции 
repeating-radial-gradient (): 


repeating-radial-gradient([[ [<Форма> ] [<Радиус> ] [<Размер> 1 1 
[ at <Положение начальной точки>],] 
<Цвет 1>[ <Положение 1>], ..., <Цвет N>[ <Положение N>]) 


Все параметры аналогичны одноименным параметрам функции radial-gradient (), 
но последняя точка будет конечной точкой градиента. 


Пример повторяющегося круглого радиального бело-синего градиента: 


background-image: repeating-radial-gradient ( 
circle farthest-corner at 80px 40px, white, blue 20px) 
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Пример чередования красных и белых полос: 


background-image: repeating-radial-gradient ( 
circle at 80px 40px, red, red 20px, white 20px, white 40px) 


2.10. Списки 


Задать параметры списка можно с помошью атрибутов стиля. Мы можем указать 
вид маркера, отображаемого перед пунктами, а также его положение. Кроме того, 
каскадные таблицы стилей позволяют использовать в качестве маркера списка лю- 
бое изображение. 


2.10.1. Вид маркера списка 


Вид маркера списка задает атрибут list-style-type. Он может принимать следую- 
шие значения: 


П а15с — выводит значки в форме кружков с заливкой: 
ul list-style-type: disc } 

П circle — выводит значки в форме кружков без заливки: 
ul list-style-type: circle } 

С square — выводит значки в форме квадрата с заливкой: 
11 list-style-type: square ) 


П decimal — нумерует пункты арабскими цифрами: 


о1 list-style-type: decimal } 


С decimal-leading-zero — нумерует пункты арабскими цифрами. Для чисел мень- 
ше десяти дополнительно выводится ведущий нуль (01): 


о1 list-style-type: decimal-leading-zero ) 

П lower-roman — нумерует пункты малыми римскими цифрами: 
о1 list-style-type: 1омег-комап 

П upper-roman — нумерует пункты большими римскими цифрами: 
ol list-style-type: upper-roman 

П lower-alpha H lower-latin — нумеруют пункты строчными латинскими буквами: 


о1 list-style-type: Іомег-а1рһа 
о1 list-style-type: lower-latin 


С upper-alpha и upper-latin — нумеруют пункты прописными латинскими буквами: 


о1 list-style-type: upper-alpha 
ol list-style-type: upper-latin 


С lower-greek — нумерует пункты малыми греческими буквами: 


ol list-style-type: lower-greek 
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П georgian — нумерует пункты грузинскими буквами: 
о1 list-style-type: georgian } 
П armenian — нумерует пункты армянскими буквами: 
ol list-style-type: armenian } 


O попе — никак не помечает пункты списка: 


о1 list-style-type: попе } 


С помощью псевдоэлемента : :реѓғоге в качестве маркера списка можно указать 
любой символ Unicode: 


ul { list-style-type: попе; padding-left: 20px } 
ul li::before { 

content: "\06рЕ"; 

color: red; 


margin-right: 0.5em 
} 


Заметим также, что атрибут list-style-type (а также остальные атрибуты списков) 
можно применять не только к списками, но и к другим элементам, у которых атри- 
бут display имеет значение list-item: 


div { display: list-item; list-style-type: circle; margin-left: 40px } 


2.10.2. Изображение в качестве маркера списка 


ОВГ-адрес изображения, которое будет использовано в качестве маркера списка, 
задает атрибут list-style-image. При этом относительные адреса указываются 
относительно расположения таблицы стилей, а не НТМГ-документа: 


ul { list-style-image: url (marker.png) } 
Значение none отменяет использование изображения в качестве маркера списка: 


ul { list-style-image: попе } 


2.10.3. Компактное отображение списка 


Более компактное отображение пунктов списка позволяет задать атрибут list- 
style-position. Он может принимать следующие значения: 


С outside — по умолчанию. Маркер отображается отдельно от текста: 
ol { 1156-55 у1е-ро$1Е1оп: outside } 
O inside — более компактное отображение списка. Маркер ВХОДИТ В состав текста: 


ol { list-style-position: inside ) 
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2.10.4. Одновременное указание характеристик списка 


Указать за один раз все характеристики списка позволяет атрибут list-style: 
list-style: <type> <position> <image> 
Параметры не являются обязательными, поэтому некоторые можно не указывать: 


ul { list-style: circle inside ) 
ul { list-style: url (магкег.рпод) } 


2.11. Таблицы 


В HTML 5 все оформление таблиц выполняется с помощью CSS. В листинге 1.11 
мы уже рассмотрели пример такого оформления. В этом разделе мы более подроб- 
но остановимся на нескольких моментах. 


2.11.1. Рамки таблицы и ячеек 


По умолчанию таблица выводится без рамки. Чтобы добавить рамку, нужно вос- 
пользоваться атрибутом border. Причем его можно указать как для таблицы, так и 
для ячеек: 


table ( 

border: black 1px solid; /% Стиль рамки таблицы %/ 
} 
са, th { 

border: black 1px solid; /% Стиль рамки ячеек */ 


} 


По умолчанию между ячейками имеется некоторое расстояние, поэтому рамка 
каждой ячейки отображается отдельно. Управлять этим расстоянием позволяет 
атрибут border-spacing: 

рогаег-зрас1та: 0; /* Расстояние между ячейками */ 

Можно указать сразу два значения через пробел. В этом случае первое значение 
определяет расстояние по горизонтали, а второе — по вертикали: 

table { border-spacing: 0 5px } 

Атрибут border-collapse Позволяет установить режим рисования рамок для самой 
таблицы и для ее ячеек. Поддерживаются два значения: 


С separate — рисуется рамка вокруг самой таблицы и рамки вокруг каждой из ее 
ячеек (поведение по умолчанию): 


table { border-collapse: separate ) 
П collapse — рисуются лишь рамки, разделяющие ячейки. Каждая ячейка таблицы 


будет заключена в одинарную рамку. Значение атрибута border-spacing при 
этом игнорируется: 


table { border-collapse: collapse ) 
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2.11.2. Размеры таблицы 


Указать ширину таблицы или ячеек позволяет атрибут width: 


table { width: 300px } 

Задать высоту таблицы или ячеек можно с помошью атрибута height: 
са, th { width: 150px; height: 50px } 

Режим задания размеров y таблиц определяет атрибут table-layout: 


П аве-о-- заданные нами значения ширины таблицы и ее ячеек — это лишь peko- 
мендация для Меб-браузера (значение по умолчанию). Он может изменить 
ширину таблицы и ее ячеек, если содержимое в них не помещается: 


table { width: 300px; table-layout: auto } 


O fixed— ширина таблицы и ее ячеек ни в коем случае изменяться не будет. Если 
содержимое не помещается в ячейках, возникнет переполнение, параметры 
которого мы можем задавать с помощью атрибута overflow: 


table { width: 300px; overflow: auto; table-layout: fixed } 
Теперь ширина таблицы не будет изменяться ни в коем случае. 


Если нужно выполнить горизонтальное выравнивание таблицы по центру роди- 
тельского элемента, то можно воспользоваться атрибутом margin: 


table { width: 300px; margin: 0 auto } 
Вот пример выравнивания по правой стороне: 


table { width: 300px; margin: 0 0 0 auto } 


2.11.3. Местоположение заголовка 


Задать местоположение заголовка таблицы позволяет атрибут caption-side: 
О top — заголовок отображается над таблицей: 


caption { 
text-align: center; /% Выравнивание заголовка по центру */ 
caption-side: top /* Вывод заголовка над таблицей */ 
} 
П bottom — заголовок отображается под таблицей: 


caption { 
сарбіоп-віде: bottom /* Вывод заголовка под таблицей */ 


2.11.4. Указание характеристик ячеек 


Выполнить выравнивание содержимого ячейки по горизонтали позволяет ат- 
рибут text-align (см. разо. 2.5.5), а по вертикали — атрибут vertical-align 
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(см. разд. 2.5.6). Задать величину отступа между границей ячейки и ее содержимым 
можно с помощью атрибута padding (см. разд. 2.6.2): 


са, ЕВ { 
height: 50px; 
border: black 1px solid; /% Стиль рамки ячеек */ 
padding: 10px; /* Отступ между границей и содержимым */ 
text-align: center; /% Выравнивание ячейки по центру */ 
vertical-align: top /% Выравнивание ячейки по верху */ 


) 


Изменить цвет фона ячеек таблицы можно с помощью атрибутов background-color 
И background. Чтобы читать таблицу было удобнее, для четных и нечетных строк 
задают разные цвета фона, например, с помощью псевдокласса :nth-child: 


tr:nth-child(2n) 1 
background: Же8е8е8 /% Зебра */ 
} 


Вид ячейки без содержимого задает атрибут empty-cells (если ячейка содержит 
пробел, символ табуляции или символ перевода строки, то она также считается 


пустой): 
С show— границы и фон пустой ячейки отображаются: 

td { border: red 1рх solid; background: gray; епреу-се118: show } 
С hide — границы и фон пустой ячейки не отображаются: 


td { border: red 1рх solid; background: gray; епріу-се115: hide } 


Чтобы не было проблем с \еБ-браузерами, лучше в пустую ячейку вставлять 
неразрывный пробел &nbsp; : 


<td>&nbsp; </td> 


2.12. Вид курсора 
Форму курсора мыши при наведении ее на элемент страницы задает атрибут 
cursor. Он может принимать следующие значения: 
С auto — УУеБ-браузер сам определяет форму курсора мыши: 
р cursor: auto } 
O попе — курсор не отображается: 
р cursor: попе } 
О crosshair — в виде креста: 


р cursors crosshair } 


О default — стрелка (курсор по умолчанию): 


р cursor: default } 
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п pointer — В виде руки с указывающим пальцем: 


р { cursor: pointer } 


O move И all-scroll — стрелки, указывающие во всех направлениях: 


р { cursor: move } 


O n-resize, ne-resize, nw-resize, s-resize, зе-гез1те, sw-resize, е-гезіге, w-resize, 
nesw-resize, nwse-resize, col-resize, row-resiz стрелки, показывающие Ha- 
правление: 


р cursor: n-resize ) 
П text и vertical-text — текстовый курсор: 
р cursor: text } 
С wait — курсор ожидания (песочные часы или круговой индикатор): 
р cursor: wait } 
п progress — стрелка с песочными часами или круговым индикатором: 
р cursor: progress } 
П һе Ір — стрелка с вопросительным знаком: 
p cursor: help 
С cell — курсор ячейки таблицы: 
p cursor: cell 
С сору — курсор копирования (стрелка с плюсом): 
р cursor: сору 


С not-allowed И no-drop — курсор в виде перечеркнутого круга: 


р cursor: not-allowed } 


Прочие курсоры: alias, zoom-in, zoom-out, ағар, grabbing И context-menu. 
Можно также задать свой собственный курсор: 


р { cursor: url (mycursor.png), url (тусигзог.саг), pointer } 


После адреса файла с изображением курсора допускается указание координат горя- 
чей точки: 


р { cursor: url (mycursor.png) 2 2, pointer } 


2.13. Псевдостили гиперссылок. 

Отображение ссылок разными цветами 

\!еБ-браузеры позволяют отобразить посещенные и непосещенные ссылки разны- 
ми цветами. Достигается это при помощи следующих псевдоклассов: 

О :link— вид непосещенной ссылки; 


O :visited — вид посещенной ссылки; 
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О :асёіуе — вид активной ссылки; 


О :hover — вид ссылки, на которую указывает курсор мыши. 


ВНИМАНИЕ! 
До и после двоеточия не должно быть пробелов. 


Пример: 


a:link { color: #000000 } 
a:visited { color: #000080 } 
a:active { color: #FF0000 } 


<a ҺгеЁ="аос1.Һіт1">Ссылка1</а> 


C ПОМОЩЬЮ псевдостилей можно менять не только цвет ссылки, но и задать, будет 
ли ссылка подчеркнута: 
:link { color: red; text-decoration: underline } 


:visited { color: blue; text-decoration: underline } 
:active { color: green; text-decoration: попе } 


ө шо ош 


:hover { color: lime; text-decoration: попе } 


Kpome того, можно применить стиль гиперссылок не только ко всему документу, HO 
и к определенному классу: 


.1іпк1:1іпк ( color: black; text-decoration: попе } 
.linkl1:visited { color: blue; text-decoration: none } 
.linkl:active { color: red; text-decoration: underline } 


ор pp 


.11пк1:һоуег { color: red; text-decoration: underline } 


<a href="doc2.html" с1аз5="110К1">Ссылка2</а> 


2.14. Форматирование блоков 


Как вы уже знаете, любой элемент УУеВ-страницы занимает в окне УҮеһ-браузера 
некоторую прямоугольную область. Эта область имеет как внутренние, так и внеш- 
ние отступы, а также содержит реальную или воображаемую границу. Тип блочной 
модели зависит от формата документа. Если тег <!ростуРЕ> указан, то блочная 
модель соответствует стандартам консорциума W3C. Реальные размеры элемента 
вычисляются так (см. рис. 2.3): 


Реальная ширина = margin-left + border-left-width + padding-left + 
width + padding-right + border-right-width + 
margin-right 

Реальная высота = margin-top + border-top-width + padding-top + height + 
padding-bottom + border-bottom-width + margin-bottom 


Если Ter <!DOCTYPE> не указан, то некоторые \еБ-браузеры переходят в режим со- 
вместимости. Поэтому при отсутствии тега <! ростуре> разные №Међ-браузеры могут 
по-разному отображать У/еВ-страницу. 
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2.14.1. Указание типа блока 


Для указания типа блока предназначен атрибут display. Он может принимать сле- 
дующие значения: 


О 
О 


оо оооо9 ооо 


ооо 


попе — содержимое блока не отображается; 


block — блок занимает всю ширину родительского элемента. Значение block ПО 
умолчанию имеют блочные теги <div> M <p>; 


inline — блок занимает только необходимое для отображения содержимого 
пространство. Задать размеры блока нельзя. Значение inline по умолчанию 
имеют строчные теги <span>, <b> и др.; 


inline-block — аналогично inline, но дополнительно можно задать размеры 
и другое форматирование, применяемое для блочного элемента. Результат ана- 
логичен встраиванию тега <img> в строку; 


1ізі-ісет-- пункт списка. Это значение по умолчанию имеет тег <li>; 
table — блочная таблица. Это значение по умолчанию имеет тег <table>; 
inline-table — строчная таблица; 


table-caption — заголовок таблицы. Это значение по умолчанию имеет тег 
<caption>; 


table-header-group — это значение по умолчанию имеет тег <thead>; 
table-row-group -- ЭТО значение по умолчанию имеет тег <tbody>; 
table-footer-group — это значение по умолчанию имеет тег <tfoot>; 
сар1е-ком-- строка таблицы. Это значение по умолчанию имеет тег <tr>; 
table-column -- ЭТО значение по умолчанию имеет тег <со1>; 


table-column-group — это значение по умолчанию имеет тег <colgroup>; 


саБ1е-се11-- ячейка таблицы. Это значение по умолчанию имеют теги <th> 
И <td>; 


flex — блочный Йех-контейнер (см. разд. 2.16); 
inline-flex — строчный Йех-контейнер; 
grid — блочный огій-контейнер (см. разд. 2.17); 


inline-grid — строчный огій-контейнер; 


С subgrid — вложенный огій-контейнер. 


Различные варианты использования атрибута display приведены в листинге 2.7. 


Листинг 2.7. Атрибут display 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 


<meta charset="utf-8"> 
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<Е1Е1е>Атрибут display</title> 
<style type="text/css"> 
div div { border: 2px solid #333 } 
label { display: inline-block; width: 100px } 
</style> 
</head> 
<body> 
<Һ1>Различные типы блоков</Һ1> 
<div> 
<div style="display: inline">display = inline</div> 
<div style="display: inline-block; width: 300px"> 
display = inline-block 
</div> 
<div style="display: block">display = block</div> 
<div style="display: попе">Этого блока не BMJHO</div> 
</div> 


<һ2>Выравнивание элементов формы</һ2> 
<div> 

<label for="login">JlornH:</label> 

<input type="text" name="login" id="login"> 
</div> 
<div> 

<label Еог="раззм">Пароль :</label> 

<input type="password" name="passw" id="passw"> 
</div> 


<Һһ2>Указание типа блока для ссылки</Һ2> 
<div> 
<div style="width: 300рх"> 
<a һкеР-"ІіпКІ.Һіші">Обычная ссылка</а> 
</div> 
<div style="width: 300рх"> 
<a href="link.html1" style="display: р1оск">Ссылка занимает всю 
ширину блока</а> 
</div> 
</div> 
</body> 
</html> 


2.14.2. Указание размеров блока 


Определить режим, в котором будут задаваться размеры блока, позволяет атрибут 
box-sizing. Он может принимать следующие два значения: 


П content-box — размеры будут задаваться для содержимого блока без учета его 
внутренних отступов и рамки (это поведение по умолчанию): 


#main { width: 400px; padding: 5px; box-sizing: content-box } 
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Элемент с идентификатором main получит ширину 410 пикселов, а его содержи- 
мое будет иметь ширину 400 пикселов; 


O border-box — размеры будут задаваться для самого блока с учетом его внутрен- 
них отступов и рамки (без учета внешних отступов): 


#main { width: 400px; padding: 5px; box-sizing: border-box } 
Элемент с идентификатором main получит ширину 400 пикселов, а его содержи- 
мое будет иметь ширину 390 (400 — 2х5) пикселов. 

Указать размеры позволяют следующие атрибуты: 


П width и height — задают соответственно ширину и высоту блока (значение по 
умолчанию auto): 


div { width: 100px; height: 100px; background: green } 

O min-width и min-height — задают соответственно минимальные ширину и высо- 
ту блока: 
div { min-width: 100px; min-height: 100px; background: green } 

O max-width и max-height — задают соответственно максимальную ширину и Bbl- 
соту блока: 


div { max-width: 100px; max-height: 100px; background: green ) 
OTH атрибуты могут иметь значение попе, означающее, что значение не задано. 


По умолчанию атрибуты width и height имеют значение auto. Если размеры явно не 
заданы, то блок займет всю ширину родительского элемента, а его высота будет 
определена по содержимому блока. Если содержимое не помещается в блок задан- 
ного размера, то он будет отображаться в соответствии со значением атрибута 
overflow (см. далее). 


ПРИМЕЧАНИЕ 


Указать размеры для строчных элементов нельзя. Строчным элементам нужно пред- 
варительно задать значение inline-block атрибута display. 


2.14.3. Атрибут overflow 


Поведение блока, чье содержимое выходит за его границы, задает атрибут overflow. 
Он может принимать следующие значения: 


С visible — блок увеличивается в размерах так, чтобы все его содержимое OTO- 
бразилось полностью (значение по умолчанию). Если размеры заданы явным 
образом, то содержимое будет выходить за границы блока, а размеры самого 
блока останутся прежними; 


O hidden — TO, что не помещается в блоке, скрывается; 


С scroll — у блока в любом случае отображаются полосы прокрутки; 
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O аако — если содержимое не помещается в блок, TO добавляются полосы про- 
крутки. Если же содержимое полностью помещается, то полосы прокрутки не 


отображаются. 


С ПОМОЩЬЮ атрибутов overflow-x И оуегЕ1ом-у МОЖНО Задать разные значения для 
горизонтального и вертикального направления соответственно: 


div { overflow-x: hidden; overflow-y: auto } 


Различные варианты использования атрибута overflow приведены в листинге 2.8. 


Листинг 2.8. Атрибут overflow 


<!DOCTYPE html> 

<html lang="ru"> 

<head> 
<meta charset="utf-8"> 
<title>ArpnőyrT overflow</title> 
<style type="text/css"> 


body { font-size: 14px; font-family: Arial; color: black } 


.div1 div { width: 100px; height: 100px } 
.аіу1 аіу, -div2 div { 
background-color: silver; 


border: black 2px solid; 
margin-bottom: 10px 
} 
.div2 { height: 600px } 
p { font-weight: bold } 
</style> 
</head> 
<body> 
<div class="div1"> 
<p>overflow = hidden</p> 
<div style="overflow: hidden"> 
этооченьдлиннаястрокабезпробелов 
То, что не влезает в границы блока, скрывается 
</div> 
<p>overflow = scroll</p> 
<div style="overflow: scroll"> 
этооченьдлиннаястрокабезпробелов 


overflow = scroll. У блока в любом случае отображаются полосы прокрутки 


</div> 
<p>overflow = auto</p> 

<div style="overflow: auto"> 
overflow = auto 
</div> 

<div style="overflow: auto"> 
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этооченьдлиннаястрокабезпробелов 


overflow = auto. Если содержимое не помещается в блок, то добавляются 
полосы прокрутки 
</div> 

</div> 

<div class="div2"> 
<p>overflow = visible. Высота не задана</р> 
<div style="overflow: visible; width: 100px"> 
этооченьдлиннаястрокабезпробелов 


overflow = visible. Блок расширяется так, чтобы вс го содержимо 
отобразилось полностью 

</div> 

<p>overflow = visible. Высота задана</р> 

<div style="overflow: visible; width: 100px; height: 100px"> 
этооченьдлиннаястрокабезпробелов 


overflow = visible. Если размеры заданы, то содержимое будет выходить 
за границы блока 
</div> 

</div> 

</body> 

</html> 


Если атрибут overflow имеет значение scroll, hidden ИЛИ auto (но He visible), то 
с помошью атрибута resize можно указать способ изменения размеров блока 
мышью. Атрибут может принимать следующие значения: 


С попе — размеры блока изменить нельзя; 

С horizontal — можно только по горизонтали; 

С vertical — можно только по вертикали; 

С both — размеры блока можно менять и по горизонтали, и по вертикали. 
Пример: 


<div style="width: 200px; height: 100px; overflow: scroll; resize: both"> 
У блока в любом случае отображаются полосы прокрутки. 
Размеры можно менять с помощью мыши, взявшись за маркер 
в правом нижнем углу 

</div> 


Если атрибут overflow имеет значение scroll, hidden ИЛИ auto (но He visible), то 
с помощью атрибута text-overflow можно указать способ обрезки текста, если он 
не помещается в область. Атрибут может принимать следующие значения: 


П clip— текст просто обрезается (значение по умолчанию); 
С ellipsis — текст обрезается и в конец добавляется многоточие: 
#21 { width: 200px; white-space: nowrap; 


overflow: hidden; text-overflow: ellipsis } 


<р іа="р1">Очень длинный текст, который будет обрезан</р> 
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Результат: 


Очень длинный текст, кото... 


2.14.4. Управление обтеканием 


По какой стороне производится выравнивание блока, определяет атрибут float. Он 
может принимать следующие значения: 


П теғе-- блок выравнивается по левой стороне, а другие элементы обтекают его 
справа; 


С right — блок выравнивается по правой стороне, а другие элементы обтекают его 
слева; 


С none — выравнивание отсутствует (значение по умолчанию). 


Разрешает или запрещает обтекание атрибут clear. Он может принимать следую- 
щие значения: 


О both — запрещает обтекание по обеим сторонам; 
O left — запрещает обтекание по левой стороне; 
O right — запрещает обтекание по правой стороне; 


П none — отменяет запрет на обтекание, который был установлен с помощью зна- 
чений both, left И right. 


Очень часто атрибуты float и clear применяются в блочной верстке Меб-страницы 
для создания колонок. Рассмотрим это на примере (листинг 2.9). 


Листинг 2.9. Блочная верстка страницы с помощью атрибута float 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<Е1Е1е>Блочная верстка страницы с помощью float</title> 
<style type="text/css"> 

* { margin: 0; padding: 0 } /* Убираем все отступы */ 


body { font-family: Verdana, Tahoma, sans-serif; font-size: 14px } 
header { background-color: silver; padding: 10px; height: 50px; 
text-align: center; line-height: 50px } 
nav { float: left; border: 1px solid black; width: 150px; 
padding: 5px; margin: 10px; min-height: 200px } 
section { border: 1рх solid black; padding: 5px; 
margin: 10px 10px 10px 185px; min-height: 500px } 
footer { background-color: silver; padding: 5px; clear: both; 
height: 30px; line-height: 30px } 


</style> 
</head> 
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<роау> 
<һеадег><Һ1>Заголовок</Һ1></һеадек> 
<пау>Панель навигации 
<p><a ВгеЕ="раде2 .ВЕи1">Страница 2</а></р> 
<p><a ВгеЕ="раде3 .ВЕи1">Страница 3</а></р> 
</пау> 
<ѕесііоп> 
<Һ2>Основное содержимое страницы</Һһ2> 
<р>Какой-то текст</р> 
</весбіоп> 
<Ғооёег>Информация об авторских правах</Ғооіег> 
</body> 
</html> 


Создаваемая Web-crpannya состоит из четырех блоков. Первый блок (header) co- 
держит заголовок и занимает всю ширину окна. Второй блок (пау) предназначен 
для вывода панели навигации — для этого блока указано выравнивание по левой 
стороне и обтекание справа. В третьем блоке (section) располагается основное 
содержимое \еБ-страницы — этот блок занимает всю ширину окна после панели 
навигации. Если изменить размер окна, то блок будет или расширяться, или су- 
жаться. Четвертый блок (footer) предназначен для вывода информации об автор- 
ских правах, а также для различных логотипов и счетчиков. Для этого блока с по- 
мощью атрибута clear отменяется обтекание с обеих сторон. 


У блочной верстки \У/еБ-страницы с помощью float есть один недостаток. Если 
уменьшить ширину окна У/еһ-браузера, то блоки выстроятся по вертикали, один 
под другим. Чтобы избежать такого эффекта, мы указали внешний отступ слева 
(185 рх). Благодаря этому, блоки всегда будут расположены по горизонтали, неза- 
висимо от ширины окна УҮер-браузера. 


Следует обратить внимание еще на один момент: для блочного элемента нельзя 
задать вертикальное выравнивание с помощью атрибута vertical-align. Чтобы до- 
биться центрирования по вертикали, мы указали значение атрибута line-height 
равным высоте блока. 


2.14.5. Позиционирование блока 


Задать способ позиционирования блока позволяет атрибут position. Он может при- 
нимать одно из следующих значений: 


П э+ае1с — статическое позиционирование (значение по умолчанию). Положение 
элемента в окне \еБ-браузера определяется его положением в НТМІ-до- 
кументе; 


П relative — относительное позиционирование. Координаты отсчитываются OT- 
носительно позиции, в которую МеБ-браузер поместил бы элемент, будь он CTA- 
тически позиционированным; 
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О absolute — абсолютное позиционирование. Координаты отсчитываются относи- 
тельно левого верхнего угла ближайшего родительского элемента, который име- 
ет позиционирование, отличное от статического; 


П ғіхеа — фиксированное позиционирование. Координаты отсчитываются OTHO- 
сительно левого верхнего угла окна Међ-браузера. При прокрутке содержимого 
окна блок не смещается; 


С sticky — сочетание relative и fixed. Вначале используется относительное 
позиционирование. Как только элемент доходит до указанной позиции, приме- 
няется фиксированное позиционирование. В листинге 2.9 мы создали макет 
страницы. Чтобы увидеть эффект от применения атрибута sticky, добавим сле- 
дующее правило стиля к уже существующим: 


пау { position: sticky; top: 10px } 


Затем уменьшим высоту окна \еБ-браузера таким образом, чтобы появилась 
вертикальная полоса прокрутки. Теперь при перемещении бегунка полосы про- 
крутки вниз вначале панель навигации будет сдвигаться вверх, как обычный 
элемент страницы. Но как только до верха страницы останется 10 пикселов, 
панель навигации остановится, а все остальное содержимое страницы будет 
сдвигаться вверх и дальше. Таким образом панель навигации всегда будет видна 
независимо от положения полосы прокрутки. 


Для указания привязки предназначены следующие атрибуты: 
С теғе-- расстояние от левой границы; 

С +ор — расстояние от верхней границы; 

С right — расстояние от правой границы; 

С воссоһ-- расстояние от нижней границы. 


Эти атрибуты могут иметь отрицательные значения и значение auto. Статически 
позиционированные элементы не имеют атрибутов left, top, right И bottom. 


Давайте рассмотрим все это на примере (листинг 2.10). 


Листинг 2.10. Позиционирование блоков 


<!DOCTYPE html> 

<html lang="ru"> 

<head> 
<meta charset="utf-8"> 
<title>losnuynonnpoBsaHnne блоков</41%1е> 
<style type="text/css"> 


body { font-family: Verdana, Tahoma, sans-serif; font-size: 14px } 

div { border: 1px solid black } 

.div1 { width: 10px; height: 2000рх; left: 900px; top: 0; 
position: absolute } 

.div2 { height: 20px; position: static; background-color: silver } 


.div3 { height: 20px; position: relative; top: 30px; 
background-color: silver } 
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.div4 width: 150px; height: 150px; position: absolute; top: 30px; 

left: 400px; background-color: green } 

.div5 width: 300px; height: 300px; position: absolute; top: 250px; 

left: 400px; } 

.div6 width: 100px; height: 100px; position: absolute; top: 50px; 

left: 50px; background-color: #F5D8C1 } 

.а1у7 width: 150px; height: 300px; position: fixed; top: 150px; 

left: 20px; background-color: #FF9600 } 

.div8 width: 100%; height: 50px; left: 0; bottom: 0; margin: 0; 
position: fixed; background-color: #F4AB56 } 


</style> 

</head> 

<body> 

<div class="div1"></div> 

<div с1азз-"4аіу2">Статическое позиционирование</діу> 

<div с1а55="91у3">Относительное позиционирование</а1у> 

<div с1азз-"Яаіу4">Абсолютное позиционирование</діу> 

<div с1аз5="А1у5">Абсолютное позиционирование внутри родительского блока 


<div class="div6">top: 50px; left: 50рх;</а1у> 
</div> 
<div с1азз-"Яаіу7">Фиксированное позиционирование</а1у> 


<div с1а55="91у8">Фиксированное позиционирование относительно 
нижней границы</аіу> 

</body> 

</html> 


Как можно видеть, страница содержит восемь блоков: 


С блок а1у1 имеет абсолютное позиционирование и смещен на 900 рх относитель- 
но левой границы \еБ-страницы. Для блока также указана большая высота 
(2000 рх). Это позволит увидеть эффект фиксированного позиционирования 
для блоков а1у7 и div8, Т. к. \еб-браузер отобразит вертикальную полосу про- 
крутки; 


П блок 4іу2 имеет статическое позиционирование, а блок div3 — относительное. 
Блок div3 сдвинут на 30 px вниз относительно блока div2, а не от верхней rpa- 
ницы \/еБ-страницы; 


О блоки 414, 41у5 и 41у6 имеют абсолютное позиционирование. Блок 4іу4 сдвинут 
на 400 рх относительно левой границы \/еБ-страницы и на 30 рх — относитель- 
но верхней. Внутри блока div5 расположен блок div6. Смещения этого блока OT- 
считываются относительно блока 41х5, а не границ Меб-страницы; 


П блоки div7 и div8 имеют фиксированное позиционирование. Блок div7 демонст- 
рирует возможность размещения панели навигации в определенном месте, а 
блок 918 — прикрепление блока к нижней границе окна \!еБ-браузера. Чтобы 
увидеть отличие этого вида позиционирования от других, переместите бегунок 
вертикальной полосы прокрутки вниз — эти блоки всегда остаются на своих 
местах и при прокрутке не перемещаются. 
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2.14.6. Последовательность отображения слоев 


Порядок, в котором свободно позиционированные элементы будут перекрываться 
друг другом, устанавливает атрибут z-index: элемент с большим значением z-index 
перекрывает элементы с меньшим значением. Значение по умолчанию auto. 


Рассмотрим порядок перекрытия на примере (листинг 2.11). 


Листинг 2.11. Атрибут z-index 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
title>ATtpnőyr z-index</title> 
<style type="text/css"> 


А 


body { font-family: Verdana, Tahoma, sans-serif; font-size: 11рі } 
main position: relative; top: 5px; height: 300px } 
main div { width: 100px; height: 100px; position: absolute } 
div1 top: 70px; left: 50px; z-index: 1; background: silver } 
div2 top: 120px; left: 100px; z-index: 2; background: red } 
div3 top: 170px; left: 150px; z-index: 3; background: green } 
</style> 
</head> 
<body> 
<div іа="таіп"> 
<div id="div1">z-index = 1</div> 
<div id="div2">z-index = 2</div> 
<div id="div3">z-index = 3</div> 
</div> 
</body> 
</html> 


2.15. Управление отображением элемента 


Видимость элемента в окне \!еБ-браузера задает атрибут visibility. Он может 
принимать следующие значения: 


С inherit — если родитель видим, то видим и элемент (значение по умолчанию); 
С visible — элемент отображается независимо от видимости родителя; 

С hidden — элемент скрывается независимо от видимости родителя; 

П collapse — полностью скрывает строку или столбец таблицы. 


Невидимый элемент при использовании hidden все равно занимает место на Web- 
странице. Для того чтобы скрыть элемент и убрать его с \еб-страницы, можно 
воспользоваться атрибутом display со значением попе. 
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Атрибуты могут задавать лишь начальное поведение элемента. Отобразить же 
скрытый элемент можно только с помощью языка программирования JavaScript. 
Рассмотрим пример использования атрибутов visibility и display, а заодно позна- 
комимся с языком программирования JavaScript (листинг 2.12). 


Листинг 2.12. Скрытие и отображение элементов 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 


<title>CkpaTne и отображение элементов</%Ч1%1е> 
<script> 
function changeDisplay() { 
var elem1 = document.getElementById ("elem1"); 
if (elem1.style.display == "none") { 


elem1.style.display = "block"; 
} 


еізе { 
elem1.style.display = "попе"; 


} 
function сһапдеүіѕірі1іёу() { 
var е1еп2 = document.getElementById ("е1ет2"); 
if (elem2.style.visibility == "hidden") { 
elem2.style.visibility = "visible"; 


} 
else { 
elem2.style.visibility = "hidden"; 


} 

</script> 
</head> 
<body> 

<div><a href="#" onclick="changeDisplay(); return false"> 
Щелкните на ссылке, чтобы отобразить или скрыть aðsay</a></div> 
<р 1а="е1ет1" style="display: попе; background-color: silver"> 
Скрытый абзац</р> 


<р>Демонстрация применения атрибута 91$р1ау.</р> 


<div><a href="#" onclick="changeVisibility(); return false"> 
Щелкните на ссылке, чтобы отобразить или скрыть aðsay</a></div> 

<р id="elem2" style="visibility: hidden; background-color: silver"> 
Скрытый абзац</р> 


<р>Демонстрация применения атрибута visibility.</p> 
</body> 
</html> 
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Итак, первая ссылка демонстрирует применение атрибута display. При щелчке на 
ссылке отображается скрытый абзац, и все содержимое страницы сдвигается вниз. 
При повторном щелчке абзац скрывается, и все содержимое страницы сдвигается 
вверх на место скрытого абзаца. 


Вторая ссылка демонстрирует применение атрибута visibility. При щелчке на 
ссылке скрытый абзац отображается, а при повторном щелчке — скрывается. Но 
в отличие от того, что происходит при изменении атрибута display, В этом случае 
все остальное содержимое страницы остается на своих первоначальных местах. 


2.16. ЕІех-контейнеры 


При изучении атрибута display мы упомянули два значения, появившиеся в CSS 3, 
но оставили их без внимания: 


П пех — блочный Йех-контейнер; 
С inline-flex — строчный Нех-контейнер. 


Элементы, для которых атрибут display имеет значение flex, являются контейне- 
рами, внутри которых можно задавать направление выравнивания дочерних эле- 
ментов, управлять растяжением или сжатием элементов, переносом элементов на 
новую строку ит. д. 


2.16.1. Направление выравнивания элементов 

внутри контейнера 

Направление выравнивания элементов внутри Пех-контейнера задает атрибут flex- 
direction. Он может принимать следующие значения: 

п row — выравнивание ПО горизонтали слева направо (значение ПО умолчанию); 

п гом-геуегзе — выравнивание ПО горизонтали справа налево; 

п column — выравнивание по вертикали сверху ВНИЗ; 

п column-reverse — выравнивание ПО вертикали снизу вверх. 


Если тег имеет параметр dir со значением "rtl", то направление выравнивания по 
горизонтали меняется на противоположное. 


Пример выравнивания элементов по вертикали приведен в листинге 2.13. В даль- 
нейших примерах мы будем менять содержимое тега <style>, не меняя разметки. 


Листинг 2.13. Выравнивание элементов по вертикали внутри Нех-контейнера 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<title>Flex-konTeňHepK/title> 
<style type="text/css"> 
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350px; width: 500px; 


colum } 
100px; padding: 5px } 


main { position: relative; height: 
border: 3px black solid; 
display: flex; flex-direction: 
main div { width: 100px; height: 
аіу1 { background: silver } 
div2 { background: red } 
div3 { background: green } 
</style> 
</head> 
<body> 


<div іа="таіп"> 
<div id="div1">div1</div> 
<div id="div2">div2</div> 
<div id="div3">div3</div> 
</div> 
</body> 
</html> 


2.16.2. Перенос на новую строку 
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Управлять переносом элементов на новую строку позволяет атрибут flex-wrap. Он 
может принимать следующие значения: 


o nowrap — элементы выстраиваются в одну линию. Если элементы не помещают- 
ся внутри контейнера, то производится уменьшение размеров элементов (значе- 


ние по умолчанию); 


новую строку в направлении, заданном атрибутом flex-direction; 


wrap — если элементы не помещаются внутри контейнера, то они переносятся на 


мгар-геуегѕе -- если элементы не помещаются внутри контейнера, то они пере- 


носятся на новую строку в направлении, противоположном значению атрибута 


flex-direction. 


В этом примере элементы будут отображаться на двух строках: 


#main ( position: relative; heigh 
border: 3px black solid; 
display: flex; flex-direc 


t: 350px; width: 250px; 


tion: row; flex-wrap: wrap } 


А вэтом примере — на одной строке с уменьшением размеров элементов: 


#main { position: relative; heigh 
border: 3px black solid; 


display: flex; flex-direc 


t: 350px; width: 250px; 


tion: row; flex-wrap: nowrap } 


2.16.3. Одновременное указание 
характеристик Пех-контейнера 


За один раз указать все характеристики Йех-контейнера позволяет 


flex-flow: 


flex-flow: [<direction>] [<wrap>] 


атрибут 
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Можно указать все значения: 


#main ( position: relative; height: 350px; width: 500px; 
border: 3px black solid; 
display: flex; flex-flow: row nowrap } 


ИЛИ ТОЛЬКО ОДНО: 


#main { position: relative; height: 350px; width: 500px; 
border: 3px black solid; 
display: flex; flex-flow: colum } 


2.16.4. Размеры элемента 


Предпочтительную ширину элемента (при горизонтальном выравнивании) или его 
предпочтительную высоту (при вертикальном выравнивании) задает атрибут flex- 
Базіз. Если свободного места достаточно, то элемент будет иметь указанный раз- 
мер, а если нет, то его размер будет определяться значением атрибута flex-shrink 
(см. далее). Если атрибут flex-basis не указан, то он по умолчанию будет иметь 
значение auto, означающее, что размер определяется содержимым элемента: 


#main { position: relative; height: 350px; width: 500px; 
border: 3px black solid; display: flex; flex-direction: row } 
#main div { padding: 5px } 
#div1 { background: silver; flex-basis: auto } 
#div2 { background: red; flex-basis: 100px } 
#div3 { background: green; flex-basis: 200px } 


2.16.5. Растяжение элементов 


Фактор растяжения при наличии свободного места в контейнере задает атрибут 
Е1ех-огом. По умолчанию атрибут имеет значение 0, означающее, что размер эле- 
мента будет соответствовать предпочтительным размерам, например, заданным 
с помощью атрибута Е1ех-Ьаз1з. Значение атрибута Е1ех-дхои можно сравнить 
с жесткостью пружины, вставленной внутрь элемента: чем больше значение, тем 
больше места будет занимать элемент. Если для двух элементов задано одинаковое 
значение, то их размеры будут равны: 


main { position: relative; height: 350px; width: 500px; 
border: 3px black solid; 
display: flex; flex-direction: colum } 

main div { padding: 5px } 

аімі { background: silver; flex-basis: 50px } 

div2 { background: red; flex-basis: 50px } 


div3 { background: green; flex-basis: 50px; flex-grow: 1 } 


В этом примере элементы выстраиваются по вертикали сверху вниз. Для всех эле- 
ментов задана предпочтительная высота 50 рх. Для элемента div3 дополнительно 
указан фактор растяжения 1. Все остальные элементы имеют фактор растяжения, 
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равный 0. Свободной высоты контейнера достаточно, поэтому первые два элемента 
будут иметь высоту 50 рх, а элемент а1у3 будет растянут на всю оставшуюся высо- 
ту, т. к. имеет фактор растяжения (пружину внутри себя). 


2.16.6. Сжатие элементов 


Сжатием размеров элемента при отсутствии свободного пространства управляет 
атрибут flex-shrink. По умолчанию атрибут имеет значение 1, означающее. что 
при недостатке места размер элемента будет уменьшаться. Значение больше 1 зада- 
ет фактор сжатия: чем больше значение. тем сильнее сжимается элемент, освобож- 
дая пространство для других элементов. Если нужно, чтобы размеры элемента 
были равны предпочтительным, то следует указать значение 0: 
#main { position: relative; height: 350px; width: 250px; 

border: 3px black solid; display: flex; flex-direction: row } 
#main div { padding: 5px } 
#div1 { background: silver; flex-basis: 100px; flex-shrink: 0 } 
#div2 { background: red; flex-basis: 100px } 
#div3 { background: green; flex-basis: 100px; flex-shrink: 3 } 


В этом примере элемент div1 будет иметь предпочтительную ширину 100 px, T. K. 
атрибут flex-shrink имеет значение 0. Оставшееся пространство будет разделено 
между элементами div2 и div3. Причем ширина элемента div2 будет больше шири- 
ны элемента div3, т. к. фактор сжатия у него меньше. 


2.16.7. Одновременное указание 
характеристик элементов 


За один раз указать все характеристики элементов внутри Пех-контейнера позволя- 
ет атрибут flex. Делается это по следующей схеме: 


flex: (<агоч>( <shrink>] ]<basis> 
Если указано одно значение, то оно задает значение атрибуту flex-basis: 
#div2 { background: red; flex: 100px } 


Если указаны два значения, то первое задает значение атрибуту flex-grow, а BTO- 
рое — атрибуту flex-basis: 

аіу1 { background: silver; flex: 2 100px } 

Вот пример указания всех значений: 


413 ( background: green; flex: 0 3 100px } 


Можно также указать значение попе, соответствующее значению 0 0 auto: 


413 ( background: green; flex: none ) 
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2.16.8. Выравнивание элементов внутри контейнера 


Выравнивание элементов внутри Йех-контейнера (по ширине для горизонтального 
контейнера или по высоте для вертикального) задает атрибут justify-content. Он 
может принимать следующие значения: 


O flex-start — выравнивание по началу контейнера (значение по умолчанию); 
O ғ1ех-епа — выравнивание по концу контейнера; 
O center — выравнивание по центру контейнера; 


П space-between — первый элемент прижат к началу контейнера, последний — 
к концу, а остальные равномерно распределяются внутри свободного простран- 
ства; 


п зрасе-агоџпа — равномерное выравнивание элементов, но перед первым и после 
последнего расстояние в два раза меньше, чем между элементами; 


П space-evenly — равномерное выравнивание элементов с одинаковыми пустыми 
пространствами. 


Пример: 


main { position: relative; height: 350px; width: 500px; 
border: 3px black solid; display: flex; 
flex-flow: row; justify-content: space-between } 

main div { width: 100px; height: 100px; padding: 5px } 

div1 { background: silver } 

div2 { background: red } 


div3 { background: green } 


Выравнивание элементов внутри Пех-контейнера (по высоте для горизонтального 
контейнера или по ширине для вертикального) задает атрибут аїідп-сопёепі — При 
условии, что атрибут flex-wrap имеет значение, отличное от nowrap. Атрибут может 
принимать следующие значения: stretch (значение ПО умолчанию), flex-start, 
flex-end, center, space-between, space-around H space-evenly. Смысл значений точно 
такой же, как и у одноименных значений атрибута justify-content, — различие 
только в направлении выравнивания. 


Вот пример горизонтального выравнивания по центру и равномерного выравнива- 
ния по вертикали для горизонтального контейнера: 


#main { position: relative; height: 350px; width: 250px; 
border: 3px black solid; display: flex; 
flex-flow: row wrap; align-content: space-around; 
justify-content: center } 

#main div { width: 100px; height: 100px; padding: 5px } 

#div1 { background: silver } 

#div2 { background: red } 

#div3 { background: green } 


Если для элемента горизонтального контейнера не задана высота, то при указании 
значения stretch элемент будет растягиваться по высоте: 
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main { position: relative; height: 350px; width: 250px; 
border: 3px black solid; display: flex; 
flex-flow: row wrap; align-content: stretch } 

main div { width: 100px; padding: 5px } 

div1 { background: silver } 

div2 { background: red } 


div3 { background: green } 


Выравнивание элементов внутри строки (по высоте для горизонтального контейне- 
ра или по ширине для вертикального) задает атрибут align-items. Он может при- 
нимать следующие значения: stretch (значение по умолчанию), flex-start, flex- 

nd, center И baseline (по базовой линии). Смысл значений точно такой же, как и 
у одноименных значений атрибута justify-content, — различие только в направле- 
нии выравнивания. Обратите внимание: атрибут align-items задает выравнивание 
внутри строки, а атрибут align-content — внутри Йех-контейнера: 


#main { position: relative; height: 350px; width: 250px; 
border: 3px black solid; display: flex; 
flex-flow: row wrap; align-items: center; 
justify-content: center; align-content: space-evenly } 

#main div { width: 100px; padding: 5px } 

#div1 { background: silver; height: 50px } 

#div2 { background: red; height: 100px } 

#div3 { background: green; height: 80px } 


Если для элемента горизонтального контейнера не задана высота, то при указании 
значения stretch элемент будет растягиваться по высоте, что позволяет делать 
столбцы одинаковой высоты независимо от содержимого: 


Жшаіп ( position: relative; height: 350px; width: 500px; 
border: 3px black solid; display: flex; 
flex-flow: row nowrap; align-items: stretch; 
justify-content: center } 

#main div { width: 33%; padding: 5px; margin: 10px } 

#div1 { background: silver } 

#div2 { background: red } 

#div3 { background: green } 


Выравнивание отдельного элемента внутри строки (по высоте для горизонтального 
контейнера или по ширине для вертикального) задает атрибут align-self. Он 
может принимать следующие значения (переопределяет значение атрибута align- 
items): auto (значение по умолчанию), stretch, flex-start, flex-end, center И 
baseline (по базовой линии): 


#main { position: relative; height: 350px; width: 250px; 
border: 3px black solid; display: flex; 
flex-flow: row wrap; align-items: center; 
justify-content: center; align-content: space-evenly } 
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#main div { width: 100px; padding: 5px } 
#div1 { background: silver; height: 50px; align-self: flex-end } 
#div2 { background: red; height: 100px } 
#div3 { background: green; height: 80px } 


2.16.9. Порядок следования элементов 
внутри контейнера 


Порядок следования элементов внутри контейнера позволяет задать атрибут order. 
В качестве его значения можно указать положительное или отрицательное число: 
чем больше число, тем дальше будет расположен элемент. По умолчанию и при 
равных значениях атрибута элементы отображаются в порядке добавления в кон- 
тейнер. 

Переместим первый добавленный элемент в самый конец контейнера: 


main { position: relative; height: 350px; width: 500px; 
border: 3px black solid; display: flex; 
flex-direction: row } 

main div { height: 100px; flex-basis: 100px; padding: 5px } 

div1 { background: silver; order: 3 } 

div2 { background: red; order: 1 } 

div3 { background: green; order: 2 } 


2.17. CSS Grid 


Атрибут display может также принимать следуюшие значения, появившиеся 
в CSS 3 и поддерживаемые самыми новыми версиями У/ер-браузеров (поэтому не 
торопитесь пока использовать CSS Grid, т. к. получите проблемы со старыми Bep- 
сиями): 


С огіа — блочный огій-контейнер; 
O inline-grid — строчный огій-контейнер; 
С subgrid — вложенный grid-konrTeňnep. 


Элементы для которых ат ибут 415 lay имеет значение grid, являются контейне- 
> р 

рами, представляющими сетку с ячейками, внутри которых можно размещать эле- 
менты. 


2.17.1. Описание строк и столбцов 


Характеристики столбцов сетки задает атрибут grid-template-columns: 
grid-template-columns: <Размер 1> ... <Размер N> 
Размеры можно задать в абсолютных величинах, процентах, с помощью ключевого 


слова auto, а также в единицах свободного пространства в сетке — fr. Если указано 
значение none, то текущие характеристики сбрасываются. 
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Вот пример описания двух столбцов одинаковой ширины: 


grid-template-columns: 1fr 1Ёх; 


А здесь второй столбец будет иметь ширину, в два раза большую ширины первого 
столбца: 


grid-template-columns: 1fr 2Ёх; 


В следуюшем примере первый столбец будет иметь ширину 100 px, а второй CTOJI- 
бец займет всю оставшуюся ширину: 


grid-template-columns: 100px auto; 


Если размеры для нескольких рядом расположенных столбцов одинаковы, TO MOX- 
но воспользоваться функцией repeat (): 


гереаї (<Число повторов> | auto-fill | auto-fit, <Характеристики>) 
Вот пример указания характеристик двух столбцов: 
grid-template-columns: repeat (2, 50%); 

Указать диапазон допустимых значений позволяет функция minmax (): 
minmax (<Минимум>, <Максимум>) 


Если ширина контейнера позволяет, то второй столбец будет иметь ширину 200 рх, 
а при уменьшении размеров контейнера предпочтительная ширина столбца будет 
в диапазоне между 100 рхи 200 рх: 


grid-template-columns: 1fr minmax (100px, 200рх); 
В качестве размера можно указать ключевые слова min-content И max-content — 


в этом случае минимальный и максимальный размеры определяются содержимым 
элемента: 


grid-template-columns: 1fr minmax (min-content, шах-сопбепе); 


Если в качестве минимального значения указано ключевое слово auto, То размер 
столбца определяется минимальной шириной элемента (значением атрибута 
min-width). Если ключевое слово auto указано для максимального значения, то оно 
эквивалентно max-content: 


grid-template-columns: 1fr minmax (auto, auto); 
Задать размер можно с помощью функции fit-content (): 
grid-template-columns: 1fr fit-content (300px); 


Для динамического управления количеством столбцов в зависимости от ширины 
контейнера можно воспользоваться значениями auto-fill И auto-fit В сочетании 
с функциями repeat () И тіптах (): 


grid-template-columns: repeat (auto-fill, плотах (200px, 1Ёү)); 
При изменении размеров контейнера количество столбцов будет меняться. 
Внутри квадратных скобок можно дать названия линиям, разделяющим ячейки: 


grid-template-columns: [vline1] 1fr [vline2] 1fr (м11пе31; 
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Если линии не имеют имен, то можно обрашаться к ним по индексу (нумерация 
начинается с единицы). 


Характеристики етрок сетки задает атрибут grid-template-rows: 
grid-template-rows: <Размер 1> ... <Размер N> 
Характеристики строк задаются точно так же, как и характеристики столбцов: 


grid-template-rows: 1fr 1fr; 
grid-template-rows: 30% 70%; 
grid-template-rows: repeat (2, 50%); 


grid-template-rows: [hline1] 1fr [hline2] 1fr [hline3]; 


Можно также просто указать значение auto, чтобы Web-6paysep автоматически 
подбирал характеристики строк: 


grid-template-rows: auto; 


Задать характеристики строк и столбцов одновременно позволяет атрибут grid- 
template. Его формат: 


grid-template: <grid-template-rows> / <grid-template-columns> 
А вот пример его использования: 


grid-template: гереа+ (2, 1Ғғ) / гереағ(5, 1fr); 


2.17.2. Автоматическое размешение элементов 
внутри сетки 


На самом деле, нам даже не нужно описывать характеристики строк и столбцов. 
Как только мы задали атрибуту display ДЛЯ контейнера значение grid, все дочерние 
элементы будут автоматически распределены по ячейкам сетки: 


<div id="main" style="display: grid; height: 350px; width: 500рх"> 
<div id="div1">div1</div> 
<div id="div2">div2</div> 
<div id="div3">div3</div> 
<div id="div4">div4</div> 
</div> 


В этом примере сетка состоит из одного столбца и четырех строк, и ячейки имеют 
одинаковые размеры. 


Если дополнительно указать характеристики столбцов, то элементы разместятся 
по ячейкам слева направо и сверху вниз. Так, в следующем примере сетка состоит 
из трех столбцов и двух строк: 


<div id="main" style="display: grid; height: 350px; width: 500px; 
grid-template-columns: repeat (3, 1fr)"> 
<div id="div1">div1</div> 
<div id="div2">div2</div> 
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<div id="div3">div3</div> 
<div id="div4">div4</div> 
</div> 


Управлять автоматическим размешением элементов в ячейках сетки позволяет ат- 
рибут grid-auto-flow. Он может принимать следующие значения: 

O рон — по строкам слева направо и сверху вниз (значение по умолчанию); 

О colum — no столбцам сверху вниз и слева направо; 


О dense — при размешении будут заполняться дыры в сетке, поэтому элементы 
могут идти не по порядку. Можно указать комбинации значений: row dense и 
column dense. 


Вот пример размещения по столбцам сверху вниз и слева направо: 


<div id="main" style="display: grid; height: 350px; width: 500px; 
grid-template-rows: repeat (3, 1fr); 
grid-auto-flow: colum"> 
<div id="div1">div1</div> 
<div id="div2">div2</div> 
<div id="div3">div3</div> 
<div id="div4">div4</div> 
</div> 


2.17.3. Добавление элементов в ячейки сетки 


Добавить элемент в определенную ячейку позволяют следующие атрибуты: 


С grid-colum-start — задает начальную вертикальную линию (нумерация линий 
начинается с единицы); 


О grid-column-end — задает конечную вертикальную линию: 
grid-column-start: 1; grid-column-end: 2; 

п grid-column -- позволяет указать сразу два значения одновременно: 
grid-colum: <grid-column-start> [/ <grid-column-end>] 


Пример: 


grid-colum: 1 / 2; 


Если элемент занимает только одну ячейку, то можно указать лишь начальную 
линию, т. к. по умолчанию атрибуты имеют значение auto: 
grid-colum: 1; 
п агіа-гои-ѕіагі — задает начальную горизонтальную линию; 
п агіа-гом-епа — задает конечную горизонтальную линию: 
grid-row-start: 1; адгіа-гом-епа: 2; 
п grid-row — позволяет указать сразу два значения одновременно: 


grid-row: <grid-row-start> [/ <grid-row-end>] 
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Примеры: 
grid-row: 1 / 2; 
дгіа-гом: 1; 
п дгіа-агеа — позволяет указать сразу все значения одновременно: 
grid-area: <grid-row-start> / <grid-colum-start> / 
<grid-row-end> / <grid-column-end> 
Вот пример добавления элемента в первую ячейку: 
агіа-агеа: 1 / 1/2 / 2; 
Пример распределения элементов по ячейкам сетки приведен в листинге 2.14. 


В дальнейших примерах мы будем менять содержимое тега <style>, не меняя раз- 
метки. 


Листинг 2.14. Добавление элементов в ячейки сетки 


<!DOCTYPE html> 

<html lang="ru"> 

<head> 

<meta charset="utf-8"> 

<title>CSS Grid</title> 

<style type="text/css"> 

main { height: 350px; width: 500px; display: grid; 
grid-template-columns: repeat (2, 50%); 
grid-template-rows: repeat(2, 50%) } 

main div { padding: 5px } 


аіу1 { background: silver; grid-row: 1; grid-colum: 1 } 
div2 { background: red; grid-row: 1; grid-column: 2 } 
div3 { background: green; grid-row: 2; grid-column: 1 } 
div4 { background: navy; grid-row: 2; grid-colum: 2 } 
</style> 
</head> 
<body> 
<div id="main"> 
<div id="div1">div1</div> 
<div id="div2">div2</div> 
<div id="div3">div3</div> 
<div id="div4">div4</div> 
</div> 
</body> 
</html> 


Как вы уже знаете, при описании характеристик столбцов и строк можно дать 
линиям имена. Эти имена допускается указывать вместо индексов: 


#main { height: 350px; width: 500px; display: grid; 
grid-template-columns: [vline1] 1fr [vline2] 1fr [vline3]; 
grid-template-rows: [hline1] 1fr [hline2] 1fr [hline3] } 
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#main div { padding: 5рх } 

#div1 { background: silver; grid-row: hlinel; grid-column: vlinel } 
#div2 { background: геа; grid-row: hlinel; grid-column: vline2 } 
#div3 { background: green; grid-row: hline2; grid-colum: vlinel } 
#div4 { background: navy; grid-row: hline2; grid-column: vline2 } 


2.17.4. Обьединение ячеек 


Один элемент может занимать сразу несколько ячеек сетки. Для обьединения ячеек 
В атрибутах grid-column-end И grid-row-end указывается конечная линия или клю- 
чевое слово span, После которого задается число объединяемых ячеек или название 
конечной линии: 


grid-colum-start: 4; grid-column-end: span 2; 
grid-row-start: 1; grid-row-end: 3; 
В атрибутах grid-column И grid-row значение задается после символа /: 


main { height: 350px; width: 600px; display: grid; 
grid-template-columns: repeat(5, 1fr); 


grid-template-rows: auto } 
main div { padding: 5px } 
аіу1 { background: silver; grid-row: 1 / span 2; grid-colum: 1 } 
div2 { background: red; grid-row: 1; grid-colum: 2 / 4 } 
div3 { background: green; grid-row: 2; grid-column: 2 / 4 } 


div4 { background: navy; grid-row: 1 / 3; grid-column: 4 / span 2 } 


В этом примере элемент а1у1 будет занимать две ячейки по вертикали, элементы 
div2 И div3 — по две ячейки по горизонтали, а элемент div4 — две ячейки по гори- 
зонтали и две ячейки по вертикали. 


2.17.5. Размеры неявных ячеек 


Задавая позицию вставки элемента в ячейку, допускается указывать индексы несу- 
ществующих линий, — в итоге элемент будет расположен в ячейке, характеристики 
которой мы не описывали. Размеры промежуточных неявных ячеек по умолчанию 
будут равны нулю. С помощью атрибутов grid-auto-columns И grid-auto-rows MOX- 
но задать размеры таких неявных ячеек: 


#main { height: 500px; width: 800px; display: grid; 
grid-template-columns: repeat(2, 1fr); 
grid-template-rows: repeat (2, 1fr); 
grid-auto-columns: 50px; grid-auto-rows: 50px } 

#main div { padding: 5px } 

#div1 { background: silver; grid-row: 1; grid-column: 1 } 

#div2 { background: геа; grid-row: 1; grid-colum: 2 } 

#div3 { background: green; grid-row: 2; grid-column: 1 } 

#div4 { background: navy; grid-row: 4; grid-column: 5 } 
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Чтобы увидеть границы ячеек сетки, открываем панель Инструменты разработ- 
чика \\еБ-браузера Firefox, переходим на вкладку Инспектор и выделяем строку 
с кодом контейнера. Затем справа на вкладке Правила находим атрибут display 
и щелкаем на значке с изображением сетки левой кнопкой мыши — границы ячеек 
в окне \!еБ-браузера станут видны. Повторный щелчок на значке скрывает эти rpa- 
ницы. Можно также перейти на вкладку Разметка | Сетка и установить все флажки 
(рис. 2.4) — вы увидите линии, номера линий, названия элементов и др. 


-5 
CSS Grid х\+ 
O file:///C:/book/test.html С ||Q поо хаха | = 
^ 
у 
> 
ЕЧ | СҮ инспектор | ZÌ Консоль ГО Отладчик () Стили (@, Профайлер 4) Память = Сеть 8 Хранилище ЕШ ех 
T Поиск в НТМІ А Ы Правила Вычислено ШТИ сынығын 
<!DOCTYPE html> сетка ^ 
<html lang="ru"> 
накладывать сетку Настройки отображения сетки 
МІ div#main 1: Ф [V] отображать номера строк 
МІ отображать имена областей 
МІ Бесконечно продлевать линии 
| 
| 
| 
| 
| 
| 
мә > оу ЖОТА Ci i ы ша 


Рис. 2.4. Отображение характеристик сетки в М/ер-браузере Firefox 


2.17.6. Расстояние между ячейками 


Если размеры элементов не заданы, то они будут заполнять всю ячейку. При этом 
между ячейками не останется никакого свободного пространства. Указать размеры 
отступов (точнее — ширину внутренних линий) позволяют атрибуты grid-row-gap 
И grid-colum-gap. По умолчанию они имеют значение 0: 
#main { height: 350px; width: 500px; display: grid; 

grid-template-columns: repeat(2, 1fr); 
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grid-template-rows: гереаї (2, 1fr); 
grid-column-gap: 10px; grid-row-gap: 10px } 
#main div { padding: 5px } 
#div1 { background: silver } 
#div2 { background: red } 
#div3 { background: green } 
#div4 { background: navy } 


Указать сразу все размеры отступов позволяет атрибут grid-gap: 


grid-gap: <Размер> 
grid-gap: <grid-row-gap> <grid-column-gap> 


Если указано только одно значение, то оно задает размер отступов по горизонтали 
и вертикали: 


grid-gap: 20px; 


Если указано два значения, то первое задает отступ по горизонтали, а второе — OT- 
ступ по вертикали: 


grid-gap: 10px 20px; 


2.17.7. Имена элементов 


Каждому элементу внутри контейнера с ПОМОЩЬЮ атрибута дгіа-агеа можно дать 
имя. В дальнейшем это имя указывается при размещении элементов в качестве зна- 
чения для ячейки в атрибуте grid-template-areas. Этот атрибут позволяет наглядно 
разместить элементы внутри ячеек сетки. Для указания пустой ячейки нужно вста- 
вить точку, а для неопределенных областей используется значение попе. 


Вот пример размещения элементов с объединением ячеек: 


#main ( height: 350px; width: 600px; display: grid; 
grid-template-columns: repeat(5, 1fr); 
grid-template-rows: repeat (2, 1fr); 
grid-template-areas: 

"div1 div2 . div4 div4" 
"divi div3 div3 div4 div4™; } 

#main div { padding: 5px } 

#div1 { background: silver; grid-area: div1 } 

#div2 { background: red; grid-area: div2 } 

#div3 { background: green; grid-area: div3 } 

#div4 { background: navy; grid-area: div4 } 


Удобный формат для одновременного указания характеристик строк и столбцов, а 
также наглядного размешения именованных элементов по ячейкам, имеет атрибут 
grid-template: 


#main { height: 350px; width: 600px; display: grid; 
grid-template: "div1 div2 . div4 div4" 1fr 
"div1 div3 div3 div4 div4" 1fr 

A ifr ifr ТЕК ТЕКО tEn 7) 
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#main div { padding: 5рх } 

#div1 { background: silver; grid-area: div1 } 
#div2 { background: red; grid-area: div2 } 
#div3 { background: green; grid-area: div3 } 
#div4 { background: navy; grid-area: div4 } 


2.17.8. Одновременное указание 
характеристик контейнера 


За один раз указать все характеристики контейнера позволяет атрибут grid: 


grid: <grid-template> 

grid: <grid-template-rows> / auto-flow[ dense] [<grid-auto-columns>] 
grid: auto-flow[ dense] [<grid-auto-rows>] / <grid-template-columns> 
grid: none 


Вот примеры его использования: 


grid: гереа® (2, 1fr) / гереа+ (5, 1Ғғ); 
grid: "div1 div2 . 41у4 div4" 1fr 
"div div3 div3 div4 div4" 1fr 

£ -tfr Ife ‘TEE Tfr Tfr; 

grid: 1fr 1fr / auto-flow 1fr; 

grid: 1fr 1fr / auto-flow dense; 

grid: auto-flow 1fr / 1fr 1fr; 

grid: auto-flow / 1fr 1fr; 


2.17.9. Выравнивание сетки внутри контейнера 
Выравнивание сетки внутри контейнера по горизонтали задает атрибут justify- 
content. Он может принимать следующие значения: 

С start — выравнивание по левой стороне контейнера (значение по умолчанию); 
С епа — выравнивание по правой стороне контейнера; 

С center — выравнивание по центру контейнера; 


П space-between — первый столбец прижат к левой стороне контейнера, послед- 
ний — к правой стороне, а остальные равномерно распределяются внутри сво- 
бодного пространства; 


п зрасе-агоџпа — равномерное выравнивание столбцов, но перед первым и после 
последнего расстояние в два раза меньше, чем между другими столбцами; 


o space-evenly — равномерное выравнивание столбцов с одинаковыми пустыми 
пространствами. 
Пример: 
#main ( height: 350px; width: 500px; display: grid; 
grid-template-columns: repeat (3, 100px); 
grid-template-rows: repeat (2, 100px); 
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border: 2px blue solid; 
justify-content: space-between } 
#main div { height: 50px; width: 50px; padding: 5px } 
#div1 { background: silver } 
#div2 { background: red } 
#div3 { background: green } 
#div4 { background: navy } 


Выравнивание сетки внутри контейнера по вертикали задает атрибут align-content. 
Он может принимать следующие значения: start, end, center, врасе-бесмееп, space- 
around И зрасе-еуеп1у. Смысл значений точно такой же, как и у одноименных зна- 
чений атрибута justify-content, — различие только в направлении выравнивания. 


Вот пример горизонтального выравнивания по центру и равномерного выравнива- 
ния по вертикали: 


#main { height: 350px; width: 500px; display: grid; 
grid-template-columns: repeat(2, 100px); 
grid-template-rows: repeat (2, 100px); 
border: 2px blue solid; 
justify-content: center; align-content: space-around } 

#main div { height: 50px; width: 50px; padding: 5px } 

#div1 { background: silver } 

#div2 { background: red } 

#div3 { background: green } 

#div4 { background: navy } 


2.17.10. Выравнивание элемента внутри ячейки 


Выравнивание элемента внутри ячейки сетки по горизонтали задает атрибут 
justify-self. Он может принимать следующие значения: 


О start — выравнивание по левой стороне ячейки; 
С епа — выравнивание по правой стороне ячейки; 
С center — выравнивание по центру ячейки; 


О stretch— если для элемента не задана ширина, то растягивает элемент на всю 
ширину ячейки. 


Пример: 


#main ( height: 350px; width: 500px; display: grid; 
grid-template-columns: repeat(2, 1fr); 
grid-template-rows: repeat (2, 1fr); 
border: 2px blue solid } 

#main div { height: 50px; padding: 5px } 

#div1 { background: silver; width: 50px; justify-self: start } 

#div2 { background: red; width: 50px; justify-self: end } 

#div3 { background: green; width: 50px; justify-self: center } 

#div4 { background: navy; justify-self: stretch } 
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Для выравнивания всех элементов внутри ячеек по горизонтали предназначен 
атрибут justify-items. Обратите внимание: атрибут указывается для контейнера, 
а не для элемента. 


Вот пример выравнивания по центру: 


#main ( height: 350px; width: 500px; display: grid; 
grid-template-columns: repeat(2, 1fr); 
grid-template-rows: repeat (2, 1fr); 
border: 2px blue solid; justify-items: center } 

#main div { height: 50px; width: 50px; padding: 5px } 

#div1 { background: silver } 

#div2 { background: red } 

#div3 { background: green } 

#div4 { background: navy } 


Выравнивание элемента внутри ячейки по вертикали задает атрибут align-self. OH 
может принимать следующие значения: stretch, start, end, center: 


#main { height: 350px; width: 500px; display: grid; 
grid-template-columns: repeat(2, 1fr); 
grid-template-rows: repeat (2, 1fr); 
border: 2px blue solid } 

#main div { width: 50px; padding: 5px } 

#div1 { background: silver; height: 50px; align-self: start } 

#div2 { background: red; height: 50px; align-self: center } 

#div3 { background: green; height: 50px; align-self: end } 

#div4 { background: navy; align-self: stretch } 


Для выравнивания всех элементов внутри ячеек по вертикали предназначен атри- 
бут align-items. Обратите внимание: атрибут указывается для контейнера, а не для 
элемента. 


Вот пример выравнивания по центру: 


#main ( height: 350px; width: 500px; display: grid; 
grid-template-columns: repeat(2, 1fr); 
grid-template-rows: repeat (2, 1fr); 
border: 2px blue solid; align-items: center } 

#main div { height: 50px; width: 50px; padding: 5px } 

#div1 { background: silver } 

#div2 { background: red } 

#div3 { background: green } 

#div4 { background: navy } 


2.18. Многоколоночный текст 


В последних версиях М№Меб-браузеров появилась возможность вывода текста в He- 
сколько колонок. Так, например, Firefox версии 56 поддерживает многоколоночный 
текст без необходимости добавления к именам атрибутов «вендорных» префиксов. 
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Однако для поддержки старых версий \еЬ-браузеров «вендорные» префиксы все 
же указывать нужно. 


2.18.1. Количество колонок 


Количество колонок задает атрибут column-count. В качестве его значения можно 
указать конкретное число или ключевое слово auto (значение ПО умолчанию), озна- 
чаюшее, что количество колонок определяется автоматически на основе значений 
атрибутов column-width И column-gap: 


р { colum-count: 3 } 


Одновременно указать количество колонок и/или их ширину можно с помошью 
атрибута columns: 


columns: <column-width> <column-count> 

Порядок следования значений может быть произвольным. 
Приведем несколько примеров: 

O создание трех колонок с предпочтительной шириной 200 рх: 


р columns: 3 200px } 


п указание только предпочтительной ширины колонок (количество колонок опре- 
деляется динамически в зависимости от ширины области): 


р columns: 200px } 


О указание фиксированного количества колонок: 


р columns: 3 } 


2.18.2. Размеры колонок 


Предпочтительную ширину колонок задает атрибут column-width. В качестве его 
значения можно указать конкретное число или ключевое слово auto (значение 
по умолчанию), означающее, что ширина колонок определяется автоматически на 
основе значений атрибутов column-count И column-gap: 


р { colum-width: 200px } 
В этом примере количество колонок будет определяться шириной элемента. 


Выравнивание текста внутри колонок по высоте задает атрибут colum-fill. Он 
может принимать следующие значения: 


O balance — колонки будут иметь одинаковую высоту (значение по умолчанию): 


р { colum-width: 200px; column-fill: balance } 


П auto — текст последовательно заполняет колонки по порядку. Если высота 
позволяет, то весь текст будет выведен в одну колонку: 


р { height: 200px; column-width: 200px; column-fill: auto } 
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2.18.3. Расстояние между колонками 


Расстояние между колонками задает атрибут column-gap. В качестве его значения 
можно указать конкретное число или ключевое слово normal (значение по умолча- 
нию), означающее, что расстояние между колонками определяет Web-6paysep. 


Приведем пару примеров: 

O динамическое определение количества колонок: 
р { column-width: 200px; column-gap: 20px } 

O фиксированное количество колонок: 


р { colum-count: 3; column-gap: 20px } 


2.18.4. Линии между колонками 


Задать характеристики ЛИНИЙ между колонками позволяют следующие атрибуты: 


С colum-rule-style — задает стиль линии. Может принимать те же самые значе- 
ния, что и атрибут border-style (см. разд. 2.7.1). Значение по умолчанию: попе; 


O colum-rule-color — задает цвет линии; 


O colum-rule-width — задает ширину линии: 


р column-width: 200px; column-gap: 30px; 
column-rule-style: solid; column-rule-color: red; 
column-rule-width: 2px } 


О column-rule — позволяет указать все характеристики за один раз: 
column-rule: <width> <style> <со1ог> 
Пример: 


р ( colum-width: 200px; column-gap: 30px; 
column-rule: 5px dotted green ) 


2.19. Фильтры и эффекты 


К элементам страницы мы можем применить различные фильтры и эффекты. Сле- 
дует учитывать, что Internet Explorer содержит свои собственные фильтры и не 
поддерживает описанные в этом разделе возможности. 


Применить фильтры к элементу позволяет атрибут filter: 
filter: <Функция 1>[ ... <Функция №] 
Можно указать только одну функцию: 


#11091 { filter: орасіку(0.5) } 
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или сразу несколько функций через пробел: 


#1191 { filter: орасіку(0.5) зеріа(1) } 


<img alt="" src="photo.jpg" id="img1"> 
Значение none удаляет все фильтры: 


#170501 { filter: попе } 


2.19.1. Изменение прозрачности 


Изменить прозрачность элемента позволяет функция орасіеу(<Значение>). В kaye- 
стве параметра можно указать вещественное число от 0 (элемент полностью про- 
зрачный) до 1 (элемент полностью непрозрачный) или проценты от 0% (элемент 
полностью прозрачный) до 100% (элемент полностью непрозрачный). 


Сделаем изображение полупрозрачным, а при наведении курсора мыши плавно 
сделаем его полностью непрозрачным: 


#11001 { filter: орасіёу (0.5); transition: 15 } 
#11091:һоуег { filter: орасііїу (1) } 


В этом примере плавность перехода между двумя состояниями элемента обеспечи- 
вает атрибут transition. 


Вместо функции орасібу() можно воспользоваться атрибутом opacity, который 
поддерживают все У/ер-браузеры. В качестве его значения указывается веществен- 
ное число от 0 (элемент ПОЛНОСТЬЮ прозрачный) ДО 1 (элемент полностью непро- 
зрачный): 

#img1 { opacity: .5; transition: 1s } 

#11091:һоуег { opacity: 1 } 


2.19.2. Размытие 


Функция blur (<Значение>) позволяет выполнить размытие по Гауссу. В качестве 
его параметра указывается радиус в абсолютных величинах. Чем больше значение, 
тем сильнее размытие: 


#1091 { filter: blur (3px); transition: 1s } 
#11091:һоуег { filter: blur (0) } 


2.19.3. Изменение яркости, насыщенности и контраста 


Изменить яркость, насыщенность и контраст позволяют следующие функции: 


п brightness (<Значение>) -- изменяет яркость изображения. Значение 1 или 100% 
соответствует исходному изображению. Меньшее значение делает изображение 
темнее, а большее — светлее. Значение 0 делает изображение черным: 

#1091 { filter: brightness (50%); transition: 15 } 

#imgl1:hover { filter: brightness (100%) } 
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0 зағагаге(<Значение>) — изменяет насыщенность изображения. Значение 1 или 
100% соответствует исходному изображению. Меньшее значение делает изобра- 
жение менее насыщенным, а большее — более насыщенным. Значение 0 делает 
изображение черно-белым: 


#img1 { filter: saturate (0); transition: 1$ } 


#11091:һоуег { filter: saturate (1) } 


П contrast (<Значение>) — изменяет контраст изображения. Значение 1 ИЛИ 100% 
соответствует исходному изображению. Меньшее значение делает изображение 
менее контрастным, а большее -- более контрастным. Значение 0 делает изо- 
бражение серым: 


#img1 { filter: contrast(.7); transition: 1s } 
Жіп(1:һоуес { filter: contrast (1) } 


2.19.4. Изменение цвета 


Изменить цвет изображения позволяют следуюцие функции: 


О әхаузса1е(<Значение>) делает изображение черно-белым. Значение 0 соответ- 
ствует исходному изображению. Значение 1 или 100% делает изображение черно- 
белым: 


img1 { filter: grayscale(100%); transition: 1s } 


imgl1:hover { filter: grayscale(0) } 


П hue-rotate (<Значение>) — изменяет цветовой тон изображения. В качестве nma- 
раметра указывается значение угла на цветом круге (от 0 до 360 deg): 


img1 { filter: hue-rotate (180дед); transition: 1s } 


imgl1:hover { filter: hue-rotate (0дед) } 


С ѕеріа (<Значение>) — создает эффект состаривания изображения (сепия). Значе- 
ние о соответствует исходному изображению. Значение 1 или 100% полностью 
применяет эффект: 


#img1 { filter: sepia(1); transition: 1s } 


#imgl1:hover { filter: sepia(0) } 


0 invert (<Значение>) — инвертирует цвета изображения. Значение 0 соответствует 
исходному изображению. Значение 1 или 100% создает негатив: 


#1091 { filter: іпуегі (1); transition: 15 } 
#17001:һоуег { filter: іпуегі (0) } 


2.19.5. Создание тени 


Добавить тень можно с помощью функции агор-эћадом (), атрибута text-shadow 
(тень для текста) и атрибута box-shadow (тень для блока). 
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Функция drop-shadow() 


Функция drop-shadow () позволяет добавить тень. Формат функции: 

drop-shadow (<X> <Ү> [<Радиус размытия>] [<Цвет>]) 

В первых двух параметрах указывается смещение тени по осям х и у. Третий пара- 
метр задает радиус размытия тени: чем больше значение, тем сильнее тень размы- 
вается. Если параметр не указан или равен нулю, то тень будет четкой без раз- 


мытия. Четвертый параметр задает цвет тени. Если параметр не указан, то будет 
использоваться значение атрибута со1ох. 


Пример создания тени: 


#1191 { filter: drop-shadow (3px 3px 5px гора (0,0,0,0.7)) } 


Создание тени для текста 


Добавить тень для текста позволяет атрибут text-shadow. Его форматы: 


text-shadow: <Х> <Ү> [<Радиус размытия>| [<Цвет>] 
text-shadow: <Параметры тени 1>[, ..., <Параметры тени №] 
text-shadow: попе 


В первом формате в первых двух параметрах указывается смещение тени по осям х 
и у. Третий параметр задает радиус размытия тени: чем больше значение, тем силь- 
нее тень размывается. Если параметр не указан или равен нулю, то тень будет чет- 
кой без размытия. Четвертый параметр задает цвет тени. Если параметр не указан, 
то будет использоваться значение атрибута color. 


Можно указывать несколько параметров тени через запятую. 
Значение попе убирает тень (поведение по умолчанию). 


Здесь мы задали для заголовков второго уровня черную тень с уровнем прозрач- 
ности 0.2, расположенную правее и ниже текста на 1 мм и не имеющую эффекта 
размытия: 


h2 ( text-shadow: Imm 1mm гара (0, 0, 0, 0.2) } 


Для заголовков первого уровня зададим красную тень, расположенную непосредст- 
венно под текстом и имеюшую радиус размытия 10 пикселов: 


h1 ( text-shadow: Omm Omm 10px геа } 


Создание тени для блока 


Добавить тень для блока позволяет атрибут box-shadow. Его форматы: 


box-shadow: <Х> <Ү> [<Радиус размытия>] [<Расширение>] [<Цвет>] [inset] 
box-shadow: «Параметры тени 1>[, ..., <Параметры тени №] 
box-shadow: попе 


Параметр <Расширение> задает величину, на которую тень увеличится относительно 
своих изначальных размеров (они равны размерам блочного элемента, для которого 
она создается). Если этот параметр не указан, расширение будет равно нулю. 
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Вот пример создания внешней тени: 


h1 { box-shadow: 1px 1px 2px 1рх гара (0, 0, 0, 0.2); padding: 5рх } 


Если указать слово inset, будет создана внутренняя тень, визуально находящаяся 
внутри блока: 


div { box-shadow: Орх Орх 10px 10px гара (0,0,0,0.3) inset; 
padding: 15px; background: orange; height: 100px } 


Назначение остальных параметров нам уже знакомо. 


2.20. Анимация с двумя состояниями 


Ранее, до появления CSS 3, для создания на страницах анимации, даже относитель- 
но простой, требовалось писать весьма сложные программы. Но сейчас задача Web- 
аниматоров существенно упростилась — чтобы заставить элемент страницы менять 
местоположение, размер или цвет, достаточно нескольких строчек С$$-кода. 


Анимация в стиле С55 3 формируется путем изменения значения указанного нами 
атрибута в течение заданного нами времени и по определенному нами закону. 


Поддержка анимации с двумя состояниями появилась в браузерах Internet 
Explorer 10, Firefox 16.0, Chrome 26.0, Opera 12.1 и Safari 6.1. 


Начальное состояние анимации задается стилем, который привязывается к аними- 
руемому элементу страницы изначально. Конечное состояние записывается в дру- 
гом стиле, который привязывается к элементу в момент начала анимации. Привя- 
зать второй стиль можно как программно, так и с помощью псевдокласса :hover, 
который применяет стиль при наведении курсора мыши на элемент: 


<Селектор> { 
/* Задаем начальное состояние анимации */ 


} 
<Селектор>:һочек { 
/* Задаем конечное состояние анимации */ 


} 


В следующем примере изначально изображение будет полупрозрачным. При наве- 
дении курсора мыши изображение плавно в течение одной секунды станет пол- 
ностью непрозрачным. При выведении курсора изображение опять плавно станет 
полупрозрачным: 


#11091 { opacity: .5; transition-duration: 1$ } 
#17051:һоуег { opacity: 1 } 


2.20.1. Продолжительность анимации 


Продолжительность анимации задает атрибут transition-duration: 


transition-duration: <Bpema 1>[, ..., <Bpema N>] 
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Для указания значения времени мы можем использовать единицы измерения 5 
(секунды) и ms (миллисекунды). Значение по умолчанию — 0 (T. е. анимации нет). 


В следующем примере мы создали анимацию, запускающуюся, как только на эле- 
мент страницы наводится курсор мыши. Если мы уберем курсор с анимируемого 
элемента, тот мгновенно вернется в свое изначальное состояние без анимации: 


#animated { background-color: #ЕЕ0000 } 
#animated:hover { background-color: #00ff00; transition-duration: 3s } 


Чтобы анимация проходила в обе стороны, нужно указать продолжительность и 
в начальном, и в конечном состояниях: 


#animated { background-color: #ЕЕ0000; transition-duration: 1$ } 
#animated:hover { background-color: #00ff00; transition-duration: 3s } 


При наведении курсора мыши цвет фона будет плавно меняться в течение трех 
секунд, а при выведении — плавно в обратную сторону в течение одной секунды. 


Если продолжительность анимации в обе стороны Должна быть одинаковой, TO 
можно ее указать только в начальном состоянии: 


Ұапіпағеа { background-color: #ЕЕ0000; transition-duration: 3$ } 
#animated:hover { background-color: #00ЕЕ00 } 


Теперь цвет фона будет плавно меняться с красного на зеленый в течение трех 
секунд в обе стороны. 


2.20.2. Задержка перед началом анимации 


Задержку перед началом анимации задает атрибут transition-delay: 
transition-delay: <Время 1>[, ..., <Время N>] 
Для указания значения времени мы можем использовать единицы Измерения 5 


(секунды) и ms (миллисекунды). Значение по умолчанию — 0 (т. е. анимация начи- 
нается без задержки). 


В следующем примере при наведении курсора мыши на элемент анимация начнется 
с задержкой в одну секунду, а при выведении курсора — сразу: 


Ұапіпағеа { background-color: #ЕЕ0000; transition-duration: 35; 
transition-delay: 0$ } 
#animated:hover { background-color: #00ЕЕ00; 
transition-duration: 3s; transition-delay: 1s } 


2.20.3. Задание анимируемых атрибутов 


Задать атрибуты, значения которых будут меняться в процессе выполнения анима- 
ции (анимируемые атрибуты), позволяет атрибут transition-property: 


transition-property: <Атрибут 1>[, ..., <Атрибут N>] 
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Названия атрибутов указываются без кавычек через запятую: 


#animated { background-color: #ЕЕ0000; color: black; 
transition-duration: 3s; height: 100px; 
transition-property: background-color, color } 

#animated:hover { background-color: #00ff00; color: red; 

height: 200px } 


В этом примере цвет текста и фона будет изменен с анимацией, а высота изменится 
сразу, т. к. атрибут height не указан в качестве значения атрибута transition- 
property. 


Доступны также два особых значения: 


П а11 — в анимацию будут вовлечены все атрибуты, значения которых измени- 
лись (поведение по умолчанию); 


O попе — отключает анимацию. 


ВНИМАНИЕ! 
Если задать значения атрибутов в процентах, то анимация выполнена не будет. 


2.20.4. Закон анимации 


Установить закон, по которому будет изменяться значение анимируемого атрибута, 
позволяет атрибут transition-timing-function: 

transition-timing-function: <Закон 1>[, ..., <Закон N>] 

CSS 3 поддерживает довольно много таких законов: 


С еаѕе — в начале скорость анимации слегка увеличивается, а в конце слегка 
уменьшается (поведение по умолчанию); 


О еаѕе-іп — медленная скорость в начале и ускорение к концу анимации; 

С ease-out — ускорение в начале и замедление к концу анимации; 

О ease-in-out — медленная скорость в начале и замедление к концу анимации; 

П linear — линейный закон, анимация будет выполняться с постоянной CKO- 
ростью; 

O саиріс-Бегіек(<Горизонтальная координата первой опорной точки>, «Вертикальная 


координата первой опорной точки>, <Горизонтальная координата второй опорной 
точки>, <Вертикальная координата второй опорной точки>) — закон, соответст- 
вующий кубической кривой Безье. 


Значения координат ее опорных точек должны быть заданы в диапазоне между 0 
и 1, где о обозначает начало анимации, а 1 — ее конец. Однако для всех атрибу- 
тов, за исключением color, вертикальная координата может выходить за указан- 
НЫЙ диапазон, что позволяет достичь эффекта «эластичной» анимации; 


С steps (<Количество шагов>[, start | епа]) — значение анимируемого атрибута 
изменяется не плавно, а скачкообразно, в начале или в конце одного из шагов 
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анимации, количество которых мы задали. Количество шагов анимации указы- 
вается в виде числа без единицы измерения. Если вторым значением указано 
start, изменение значения анимируемого атрибута выполняется в начале каждо- 
го шага, если епа или если второе значение вообще не указано, — в его конце; 


п step-start — анимируемый атрибут сразу получит свое конечное значение, 
которое в дальнейшем не изменится. Эквивалентно указанию steps (1, start); 


o step-end — анимируемый атрибут будет иметь свое начальное значение, кото- 
рое в конце анимации мгновенно изменится на конечное. Эквивалентно указа- 
НИЮ steps (1, end). 


Вот пример анимации, изменяющейся по линейному закону: 


animated { background-color: green; width: 100px; 
transition-duration: 3s; 
transition-timing-function: linear } 
animated:hover { width: 500px } 


Задаем закон анимации, соответствующий кубической кривой Безье: 


animated { background-color: green; width: 100px; 
transition-duration: 3s; 
transition-timing-function: cubic-bezier(0.1,0.5,0.9,0.5) } 


animated:hover { width: 500px } 


А процесс этой анимации будет разбит на пять шагов, и значение анимируемого 
атрибута будет скачкообразно меняться в начале каждого шага: 


#animated { background-color: green; width: 100px; 
transition-duration: 3s; 
transition-timing-function: steps (5, start) } 

#animated:hover { width: 500px } 


2.20.5. Одновременное задание 
всех параметров анимации 


Задать все параметры анимации одновременно позволяет атрибут transition: 
transition: [<property>] <duration> [<timing-function>] [<delay>] 
transition: <Анимация 1>[, ..., <Анимация N>] 

Значение по умолчанию: а11 05 еазе 05. 

Пример: 


animated { background-color: green; width: 100px; 
transition: width 3s ease-in 0.5s } 
animated:hover { width: 500px } 


Можно указать только продолжительность анимации: 


animated { background-color: green; width: 100px; 
transition: 3s } 


animated:hover { width: 500px } 
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2.20.6. Сложная анимация 


Что, если нам понадобится изменять в процессе анимации значения отдельных 
атрибутов не так, как остальных? Для этого мы можем воспользоваться возмож- 
ностями CSS по созданию сложной анимации. 


Сначала укажем все анимируемые атрибуты в атрибуте transition-property, разде- 
лив их запятыми: 


transition-property: color, background-color, font-size, width, height; 


Потом зададим параметры анимации для всех этих атрибутов, указав их в атри- 
бутах transition-duration, transition-delay И transition-timing-function Также 
через запятую: 


Егапѕіёіоп-аџгаїіоп: 35, 25, 35$, 15, 1.55; 


Первое значение параметра будет относиться к первому анимируемому атрибуту, 
второе — ко второму ит. д. Так, в нашем случае значение цвета текста будет изме- 
няться в течение трех секунд, значение цвета фона — в течение двух секунд, а зна- 
чение размера шрифта — в течение трех секунд ит. д. 


Если в атрибутах transition-duration, transition-delay ИЛИ transition-timing- 
function указано меньше значений, чем атрибутов В transition-property, набор 
указанных значений будет повторяться столько раз, чтобы «покрыть» все указан- 
ные анимируемые атрибуты: 


transition-property: color, background-color, font-size, width, height; 
transition-duration: 3s, 2s; 


В этом случае: 

С значение атрибута color будет изменяться в течение трех секунд; 

С значение атрибута background-color — В течение двух секунд; 

O font-size — трех секунд; 

O width — двух; 

О height — трех. 

Если же указать в атрибутах transition-duration, transition-delay ИЛИ transition- 


timing-function большее число значений, лишние значения будут проигнориро- 
ваны: 


#animated { background-color: green; width: 100px; height: 100px; 
font-size: 10рі; color: black; 
transition-property: color, background-color, font-size, width, height; 
transition-duration: 3s, 2s, 3s, 1s, 1.5s 
} 
#animated:hover { width: 500px; height: 500px; 
background-color: red; color: green; font-size: 30pt 
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2.21. Анимация с несколькими состояниями 


Анимация с несколькими состояниями включает в свой состав несколько ключевых 
кадров, расположенных на шкале времени (покадровая анимация). Каждый ключе- 
вой кадр описывает набор анимируемых атрибутов и их значений, а шкала времени 
задает положение этих ключевых кадров во времени. 


Полноценная поддержка анимации с несколькими состояниями появилась в брау- 
зерах Internet Explorer 10, Firefox 16.0, Chrome 43.0, Opera 30.0 и Safari 9.0. В более 
ранних версиях браузеров нужно использовать «вендорные» префиксы. 


2.21.1. Шкала времени 


Шкала времени описывается с помощью правила Rkeyframes по следующей схеме: 


@кеуЕгашез <Название шкалы времени> { 


<Позиция 1>[, <Позиция 2>] { 
<Ключевой кадр 1> 


<Позиция 3>[, <Позиция 4>] { 
<Ключевой кадр 2> 


<Позиция N-1>[, <Позиция N>] 1 


<Ключевой кадр N> 


} 


Название шкалы времени указывается без кавычек и должно быть уникальным 
в пределах страницы. В нем допускается использовать буквы латиницы, цифры, 
дефисы и знаки подчеркивания, причем начинаться оно должно с буквы. 


Положение ключевого кадра на шкале времени указывается в процентах от значе- 
ния продолжительности анимации (как ее задать, мы узнаем позже). Значение 0% 
задает начало анимации, 100% — ее конец, а, скажем, 503 — ее середину. Вместо 0% 
можно использовать ключевое слово from, а вместо 100% — to. 


Каждый ключевой кадр описывает набор анимируемых атрибутов и их значений. 


В следующем примере анимации с тремя ключевыми кадрами при наведении кур- 
сора мыши ширина блока плавно увеличится, а затем уменьшится. Продолжитель- 
ность анимации составит две секунды. Название шкалы времени (myAnimation) ука- 
зывается в качестве значения атрибута animation: 


@keyframes myAnimation { 
0% { width: 100px } 
50% { width: 200px } 
100% { width: 100px } 


#animated { background: green; width: 100px; height: 100px } 
#animated:hover { animation: myAnimation 2s linear } 
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А здесь мы описываем шкалу времени из пяти кадров с именем sample: 


@кеуЕгашез$ sample ( 
from { left: 100px; top: 50px 
25% { left: 200px; top: 50px 
50% { left: 200px; top: 150px 
75% { left: 100px; top: 150px 
to { left: 100px; top: 50px 

} 

#animated { background: green; width: 100px; height: 100px; 


position: absolute; left: 100px; top: 50px; 
animation: sample 5s linear infinite } 


В результате анимируемый элемент будет двигаться по траектории в виде квадрата 
бесконечное число раз. Продолжительность одной фазы анимации составит пять 
секунд. 


2.21.2. Указание названия шкалы времени 


Создав шкалу времени, мы можем задать ее для анимируемого элемента. Название 
шкалы времени (без кавычек) указывается в атрибуте апішағіоп-паше: 


animation-name: <Название шкалы времени 1>[, ..., 
<Название шкалы времени N>] 


Пример: 

animation-name: sample; 

Можно указать сразу несколько названий через запятую: 
animation-name: sample, myAnimation; 


Предопределенное значение none отключает любую анимацию элемента (это, кста- 
ти, поведение по умолчанию). 


2.21.3. Продолжительность анимации 


Продолжительность анимации задает атрибут animation-duration: 


animation-duration: <Время 1>[, ..., <Время N>] 


Для указания значения времени мы можем использовать единицы измерения 5 
(секунды) и ms (миллисекунды). Значение по умолчанию — о (T. е. анимации нет): 


animation-duration: 5$; 


2.21.4. Задержка перед началом анимации 


Задержку перед началом анимации задает атрибут animation-delay: 


animation-delay: <Время 1>[, ..., <Время №] 
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Для указания значения времени мы можем использовать единицы измерения 5 
(секунды) и ms (миллисекунды). Значение по умолчанию — 0 (т. е. анимация начи- 
нается без задержки): 


апітаііоп-дӢе1ау: 35; 


2.21.5. Закон анимации 

Закон, по которому будет выполняться анимация, устанавливает атрибут animation- 
timing-function: 

animation-timing-function: <Закон 1>[, ..., <Закон N>] 


Можно указать те же самые законы, что H y атрибута transition-timing-function 
(см. разд. 2.20.4): 


animation-timing-function: linear; 


2.21.6. Количество повторений анимации 


Количество повторений (проходов) анимации задает атрибут animation-iteration- 
count. Это количество указывается числом без единицы измерения. Значение 
infinite задает бесконечное повторение анимации. Значение по умолчанию — 1. 


Задаем пять повторений: 


animation-iteration-count: 5; 


А вот пример бесконечной анимации: 


Ұапіпағеа { background: green; width: 100px; height: 100px; 
position: absolute; left: 100px; top: 50px; 
animation-name: sample; 
animation-duration: 5s; 
animation-delay: 0s; 
animation-timing-function: linear; 


animation-iteration-count: infinite } 


2.21.7. Направление анимации 


В каком направлении будет воспроизводиться анимация (в прямом, как мы задали 
на шкале времени, в обратном или то в прямом, то в обратном) позволяет указать 
атрибут animation-direction. Он может принимать четыре значения: 


O normal — прямое направление анимации (значение по умолчанию); 
O reverse — обратное направление анимации; 


П alternate — нечетные проходы анимации воспроизводятся в прямом направле- 
нии, а четные — в обратном; 


O alternate-revers нечетные проходы анимации воспроизводятся в обратном 
направлении, а четные — в прямом. 
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Понятно, что значения alternate И alternate-reverse Имеет смысл указывать лишь 
в тех случаях, если анимация повторяется более одного раза: 


@keyframes myAnimation { 
0% { left: 100px } 
100% { left: 500рх } 

} 

#animated { background: green; width: 100px; height: 100px; 
position: absolute; left: 100px; top: 50px; 
animation-name: myAnimation; 
animation-duration: 25; 
animation-timing-function: ease-in-out; 
animation-iteration-count: infinite; 
animation-direction: alternate } 


2.21.8. Текушее состояние анимации 


Текушее состояние анимации: анимация воспроизводится (значение running, HC- 
пользуемое по умолчанию) или приостановлена (значение paused) — задает атрибут 
animation-play-state 


Создадим анимацию, которая начинается сразу после загрузки страницы и приос- 
танавливается, если навести курсор мыши на элемент: 


ҰЖапіпағеа { background: green; width: 100px; height: 100px; 
position: absolute; left: 100px; top: 50px; 
animation-name: myAnimation; 
animation-duration: 2s; 
animation-timing-function: ease-in-out; 
animation-iteration-count: infinite; 
animation-direction: alternate; 
animation-play-state: running } 

#animated:hover { animation-play-state: paused } 


2.21.9. Состояние элемента 
до начала анимации и после ее завершения 


Состояние элемента до начала анимации и после ее завершения определяет атрибут 
animation-fill-mode. Он может принимать четыре значения: 


O попе — элемент окажется в состоянии, заданном в привязанном к нему первом 
стиле. Состояния, описанные в ключевых кадрах анимации, в этом случае в рас- 
чет не принимаются. Это значение по умолчанию; 


O backwards — до начала анимации, на период действия задержки (значение атри- 
бута animation-delay), элемент окажется в состоянии, описанном B начальном 
ключевом кадре (это может быть первый ключевой кадр или последний — в за- 
висимости от значения атрибута animation-direction). По умолчанию на период 
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задержки элемент остается в состоянии, заданном в привязанном к нему первом 
стиле, и не зависит от ключевых кадров; 


O forwards — после завершения анимации элемент окажется в состоянии, описан- 
ном в конечном ключевом кадре (это может быть последний ключевой кадр 
ИЛИ первый — в зависимости от значений атрибутов animation-direction И 


animation-iteration-count); 
О both — комбинация значений backwards и forwards. 


В следующем примере изначально элемент расположен в положении 100 px OT ле- 
вого края, а анимация начинается от положения 0 px. Так как задано значение both, 
после запуска анимации на период задержки (три секунды) элемент окажется в по- 
ложении 0 рх и будет там находиться до начала анимации. Если бы мы не указали 
значение both ИЛИ backwards, ТО OH находился бы в позиции 100 px. После заверше- 
ния анимации элемент останется в положении 500 рх, которое задано последним 
ключевым кадром. Если бы мы не указали значение both ИЛИ forwards, ТО ОН нахо- 
дился бы в позиции 100 рх: 


@keyframes myAnimation { 
0% { left: 0) 
100% { left: 500px } 

} 

#animated { background: green; width: 100px; height: 100px; 
position: absolute; left: 100px; top: 50px; 
animation-name: myAnimation; 
animation-duration: 2s; 
animation-iteration-count: 1; 
animation-direction: normal; 
animation-delay: 3s; 
animation-fill-mode: both } 


2.21.10. Одновременное задание 
всех параметров анимации 


Задать все параметры анимации сразу позволяет атрибут animation: 


animation: <animation-name> <animation-duration> 
[<animation-timing-function>] [<animation-delay>] 
[<animation-iteration-count>] [<animation-direction>] 
[<animation-fill-mode>] [<animation-play-state>] 


Вот пример его использования: 


#апітаеа { background: green; width: 100px; height: 100px; 
position: absolute; left: 100px; top: 50px; 
animation: sample 5s linear infinite alternate } 
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2.21.11. Сложная анимация 


И, наконец, как и в случае анимации с двумя состояниями, мы можем создать более 
сложную анимацию. указав параметры через запятую: 


@keyframes animl { 
0% { left: 0 } 
100% { left: 500px } 

} 

@keyframes anim2 { 

0% { background-color: геа } 
100% { background-color: blue } 

} 

#animated { background: green; width: 100px; height: 100px; 
position: absolute; left: 100px; top: 50px; 
animation-name: animl, anim2; 
animation-duration: 6s, 3s; 
animation-iteration-count: 1, 2 } 


Здесь действуют те же правила, что мы изучили применительно к анимации с дву- 
МЯ СОСТОЯНИЯМИ. 


2.22. Двумерные трансформации 


CSS 3 позволяет выполнять различные трансформации с элементами: смещать их 
относительно изначального местоположения, наклонять, вращать и изменять их 
масштаб. Такие манипуляции можно выполнить без необходимости превращения 
элемента в свободно позиционированный. 


Трансформации бывают двумерными и трехмерными. Мы начнем с двумерных 
трансформаций, которые выполняются в плоскости страницы. 


Поддержка трансформаций появилась в браузерах Internet Explorer 10, Firefox 16.0, 
Chrome 36.0, Opera 23.0 и Safari 9.0. Для предыдущих версий браузеров нужно HC- 
пользовать «вендорные» префиксы. 


2.22.1. Атрибут transform 


Способ трансформации задается с помощью атрибута transform: 

transform: <Функция 1>[ ... <Функция N>] 

transform: none 

В качестве значения указывается функция, задаюшая трансформацию. Можно ука- 
зать несколько функций через пробел. Параметры трансформации задаются в виде 
аргументов функции (указываются через запятую) в круглых скобках, которые ста- 
вятся сразу же после ее имени: 


#div1 ( background: red; width: 100px; height: 100px; 
transform: translate (100px, 200px) } 
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#div2 { background: green; width: 100px; height: 100px; 
position: absolute; left: 200px; top: 50px; 
transform: rotate (45deg) } 


<div id="div1">div1</div> 
<div id="div2">div2</div> 
B этом примере элемент C идентификатором div1 сместится на 100 пикселов вправо 


И 200 пикселов вниз относительно начального положения, а элемент с идентифика- 
тором div2 будет повернут на 45 градусов. 


В дальнейшем разговор в основном пойдет о функциях, применяемых для указания 
трансформаций и их параметров. Попутно мы рассмотрим еще несколько атрибу- 
тов, которые могут нам пригодиться. 


2.22.2. Смещение 
Для смещения элемента относительно начального положения предназначены сле- 
дующие функции: 


O translateX(<tx>) — выполняет смещение элемента по горизонтали. Положи- 
тельные значения смещают элемент вправо, а отрицательные — влево. Сдвинем 
элемент на 100 пикселов вправо: 


transform: translateX (100px); 
o translateY (<ty>) -- выполняет смещение элемента по вертикали. Положитель- 


ные значения смещают элемент вниз, а отрицательные — вверх. Сдвинем эле- 
мент на 50 пикселов вверх: 


transform: translateY (-50рх); 
П translate (<tx> [, <ty>]) — позволяет сместить элемент сразу по обеим коорди- 
натным осям. В качестве первого параметра указывается величина смецения по 


горизонтали, а в качестве второго — величина смещения по вертикали. Сдвинем 
элемент на 50 пикселов влево и 100 пикселов вниз: 


transform: translate (-50рх, 100px); 


2.22.3. Изменение масштаба 


Изменить масштаб элемента позволяют следующие функции: 


O ѕса1ех (<ѕх>) — выполняет масштабирование ВДОЛЬ горизонтальной оси коорди- 
нат. В качестве параметра указывается относительная величина, на которую 
следует изменить масштаб. Значение больше единицы задает увеличение мас- 
штаба, а значение меньше единицы — его уменьшение. Единица измерения при 
этом не указывается. 


Вот пример увеличения масштаба по горизонтали в два раза: 


transform: зса1ех (2); 
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Если указать значение -1, то элемент будет зеркально отображен по горизон- 
тали: 


transform: ѕса1ех (-1); 

O зсалеу (<ѕу>) -- выполняет масштабирование ВДОЛЬ вертикальной оси коорди- 
нат. 
Вот пример уменьшения масштаба по вертикали в два раза: 


transform: зса1еү (0.5); 


Если указать значение -1, то элемент будет зеркально отображен по вертикали: 


transform: зса1еу(-1); 


П scale(<sx>[, <зу>]) — выполняет масштабирование элемента одновременно по 
обеим координатным осям. Первый параметр функции задает величину масшта- 
ба по горизонтали, а второй — по вертикали. Если указан только один параметр, 
то изменение масштаба будет выполнено пропорционально по обеим коорди- 
натным осям. Растянем контейнер вдвое в ширину и сожмем вдвое в высоту: 


transform: вса1е(2, 0.5); 
По умолчанию точка, относительно которой выполняется изменение масшта- 
ба, расположена в центре элемента. С помощью атрибута transform-origin 
(см. разд. 2.22.7) мы можем сместить ее в другое место, например в левый верхний 
угол: 


#div1 ( background: red; width: 100px; height: 100px; 
transform-origin: left top; transform: scale(2) } 


2.22.4. Наклон 


Наклонить элемент страницы позволяют следующие функции: 


O экемх (<ах>) — выполняет наклон по горизонтальной оси координат. В качестве 
параметра указывается угол, на который требуется выполнить наклон. Угол этот 
отсчитывается против часовой стрелки. Чтобы выполнить наклон по часовой 
стрелке, следует указать отрицательное значение угла. Наклоняем контейнер на 
25° по горизонтали против часовой стрелки: 


transform: skewX (25аед); 


С skewY(<ay>) — выполняет наклон по вертикальной оси координат. Наклоняем 
контейнер на 5% по вертикали по часовой стрелке: 


transform: өКкемҮ(-5аеа); 


С зкем(<ах>[, <ау>1) — наклоняет элемент сразу по горизонтали и вертикали. 
В качестве первого параметра указывается угол наклона по горизонтали, а в ка- 
честве второго — угол наклона по вертикали: 


transform: зкем(25аеа, -5аед) ; 
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Элемент будет наклоняться относительно точки начала координат. По умолчанию 
она находится в середине элемента. С помощью атрибута transform-origin 
(см. разд. 2.22.7) ее можно сместить в другое место: 


#div1 { background: red; width: 100px; height: 100px; 
transform-origin: left top; transform: skew (25аед) } 


2.22.5. Врашение 


Повернуть элемент на заданный угол позволяет функция госасе(<Угол>). Нужный 
угол задается в качестве ее единственного параметра. Положительное значение 
угла задает поворот по часовой стрелке, отрицательное — против часовой стрелки: 


С поворачиваем элемент на 45° по часовой стрелке: 
transform: rotate (45аед); 
O поворачиваем элемент на 90% против часовой стрелки: 
transform: rotate (-90аеа) ; 
Если этот элемент содержит текст, мы получим вертикальную надпись. 


Точка начала координат, вокруг которой поворачивается элемент, по умолчанию 
находится в его центре. С помощью атрибута transform-origin (см. разд. 2.22.7) ее 
можно сместить в другое место: 


#div1 ( background: red; width: 100px; height: 100px; 
transform-origin: left top; transform: rotate (-20deg) } 


2.22.6. Применение матрицы трансформации 


Применить произвольную матрицу трансформации позволяет функция matrix (): 
matrix (mxx, шху, myx, myy, tx, ty) 

Матрица трансформации имеет следующий вид: 

mxx mxy tx 

myx myy ty 

Вычисление координат с учетом трансформации производится так: 

Хх = пхх * х + пху * у + їх 

у = пух * х + пуу * у + ty 


Вот пример матрицы трансформации для масштабирования в два раза: 
transform: таёгіх (2, 0, 0, 2, 0, 0); 
Матрица трансформации для вращения имеет следующий вид: 
cos(a) sin(a) їх 
-ѕіп(а) cos(a) ty 
Вот пример вращения элемента на угол 45% по часовой стрелке (синус и косинус 
этого угла равен 0.7071): 
transform: таїгіх (0.7071, 0.7071, -0.7071, 0.7071, 0, 0); 
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2.22.7. Позиционирование точки начала координат 
для двумерных трансформаций 


Ранее неоднократно отмечалось, что по умолчанию точка начала координат распо- 
лагается в середине элемента страницы, к которому применяются трансформации. 
Соответственно, относительно этой точки элемент будет изменять масштаб, накло- 
няться и вращаться. Но у нас есть возможность установить точку начала координат 
в любое место элемента с ПОМОЩЬЮ атрибута transform-origin: 


transform-origin: <Горизонтальная координата> <Вертикальная координата> 


Горизонтальную координату можно указать в виде числа, представляющего собой 
расстояние от левой границы элемента до самой точки или до одного из предопре- 
деленных значений: left (левая граница элемента), center (центр) или right (правая 
граница). Вертикальная координата также задается в виде числового расстояния 
либо от верхней границы элемента, либо от одного из предопределенных значений: 
top (верхняя граница элемента), center (центр) и bottom (нижняя граница). 


Значение по умолчанию: 50% 50% (T. е. точка начала координат находится в центре 
элемента). 


Указав местоположение точки начала координат в абсолютных единицах измере- 
ния, мы можем даже вынести эту точку за пределы элемента. Иногда такой прием 
может быть полезным. 


В следующем примере мы смещаем точку начала координат в верхний левый угол 
блока и поворачиваем его на 45% по часовой стрелке: 


#01у2 { background: green; width: 100px; height: 100px; 
position: absolute; left: 200px; top: 50px; 
transform-origin: left top; transform: rotate (45deg) } 


В результате блок будет повернут вокруг своего левого верхнего угла. 


2.22.8. Сложные двумерные трансформации 


Как сместить, изменить масштаб, наклонить или повернуть элемент страницы, мы 
выяснили. Но что, если нам потребуется, скажем, одновременно сместить и повер- 
нуть его, т. е. выполнить сложное преобразование? Для этого достаточно все функ- 
ции, указывающие отдельные преобразования, записать в значении атрибута 
transform друг за другом, разделив их пробелами: 


O смешаем элемент на 200 пикселов вниз и увеличиваем его ширину вдвое: 


transform: translateY (200px) scaleX (2); 


O наклоняем элемент на 15° против часовой стрелки и поворачиваем на 45° также 
против часовой стрелки: 


transform: skewX(15deg) rotate (-45ед) ; 
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2.23. Трехмерные трансформации 


Трехмерные трансформации ВЫПОЛНЯЮТСЯ В воображаемом трехмерном простран- 
стве, проецируемом на плоскость страницы. 


Двумерные трансформации выполняются по горизонтальной и вертикальной коор- 
динатным осям, носяшим в математике наименования X и Y. В случае трехмерных 
преобразований к ним добавляется ось 7, направленная из точки начала координат 
перпендикулярно воображаемой поверхности элемента. Положительные значения 
координаты по этой оси отсчитываются в направлении к посетителю, отрицатель- 
ные — от посетителя. 


Все трехмерные трансформации элементов страницы выполняются в ортогональ- 
ной проекции на поверхность контейнера, в котором они находятся. 


2.23.1. Перспектива 


Перспектива (ее также называют глубиной перспективы) в CSS 3 — это отсчиты- 
ваемое по оси 2 расстояние между воображаемым наблюдателем (посетителем) 
и поверхностью контейнера, в котором находится подвергаемый трансформациям 
элемент. Фактически перспектива добавляет трехмерному изображению «глубину», 
благодаря чему мы получим на странице тот эффект, которого собираемся добить- 
ся, применяя трехмерные трансформации. 


По умолчанию перспектива равна нулю, т. е. фактически отсутствует. Из-за этого 
при выполнении трехмерных трансформаций мы получим не тот результат, на ко- 
торый рассчитываем. 


Следовательно, сначала нам нужно указать перспективу. Сделать это можно с по- 
мощью атрибута perspective, указав в качестве его значения величину перспекти- 
вы. Значение попе убирает перспективу, делая ее равной нулю (значение по умол- 
чанию). 


Запомним, что этот атрибут и, соответственно, перспектива указывается для кон- 
тейнера элемента, а не для самого элемента. 


Задаем перспективу в 300 пикселов для всех элементов, находящихся на странице: 
body { perspective: 300px } 
Функция регзресііче() позволяет задать перспективу для самого элемента: 


#1191 { transform: perspective (900px) rotateX(45deg) } 


<img alt="" src="photo.jpg" id="img1"> 


2.23.2. Выполнение трехмерных трансформаций 


В случае трехмерных трансформаций для смещения, масштабирования и наклона 
элементов по горизонтальной и вертикальной координатным осям мы можем ис- 
пользовать те же функции, что применяли для выполнения двумерных трансфор- 
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маций. Так что здесь нам остается лишь изучить функции, специфичные для собст- 
венно трехмерных трансформаций. 


Вот поддерживаемые функции, задаваемые ими трехмерные трансформации И 
примеры их использования: 


O translatez(<tz>) — смещение элемента по оси Z. Единственный параметр задает 
величину смещения. Положительные значения координат отсчитываются в на- 
правлении к посетителю, отрицательные — от посетителя: 


transform: translatez (50px); 
transform: translatez (-50рх); 


O translate3d(<tx>, <ty>, <Е2>) — смещение элемента одновременно по всем 
координатным осям. Принимает три параметра, задающие, соответственно, 
смещения по осям X, Үй Z: 


transform: translate3d(100px, -200рх, Іст); 
П scalez(<sz>) — масштабирование по оси 2. Единственный параметр задает Mac- 
штаб элемента: 


transform: вса1е2(0.5) гофафех (45аеа) ; 


Масштабировать элемент по оси 2 имеет смысл только в том случае, если перед 
масштабированием к нему был применен поворот вокруг оси X или у. В против- 
ном случае визуально этот элемент никак не изменится; 


П scale3d(<sx>, <ѕу>, <в2>) — масштабирование сразу по всем трем координат- 
ным осям. Принимает три параметра, задающие, соответственно, величины 
масштаба по осям X, Y H Z: 


transform: scale3d(1.5, 0.5, 2); 
С rotateX(<yron>), rotateY (<Угол>) И гобабе? (<Угол>) — поворот элемента по KO- 


ординатным осям X, Y и Z соответственно. Единственный параметр задает угол 
поворота: 


transform: гобабех (454ед); 
transform: rotateY (-15аед); 
transform: rotatezZ(0.5turn); 


П rotate3d(<X>, <Ү>, <7>, <Угол>) -- позволяет указать оси, вокруг которых вы- 
полняется врашение. 


Вот пример вращения вокруг оси Y на угол 60° по часовой стрелке: 


transform: rotate3d(0, 1, 0, 60deg); 


2.23.3. Задание точки зрения 


Мы уже знаем, что перед выполнением трехмерных трансформаций необходимо 
указать перспективу. В противном случае мы можем вообще не получить никакого 
видимого результата. Также мы знаем, что перспектива в CSS 3 — это расстояние 
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между наблюдателем и плоскостью контейнера элемента, над которым выполняет- 
ся трансформация. 


Но где же находится этот воображаемый наблюдатель? В особой точке, носящей 
название точки зрения. Ее \МеБ-браузер и имеет в виду, когда рассчитывает проек- 
цию трансформируемого элемента на двумерную плоскость его контейнера. 


По умолчанию точка зрения находится в центре контейнера элемента, к которому 
применяется трансформация, и отстоит от него на величину перспективы по оси 7. 
И, что очень важно, всегда остается в этом месте независимо от того, какое преоб- 
разование мы применяем к элементам, находящимся в этом контейнере. 


Но при необходимости мы можем сместить точку зрения в другое место, тем са- 
мым заставив воображаемого наблюдателя «взглянуть» на подвергаемый транс- 
формациям элемент с другой стороны. Это можно сделать с помощью атрибута 
perspective-origin: 


perspective-origin: <X> [<Y>] 


Координаты проекции точки зрения указываются в том же формате, как и местопо- 
ложение точки начала координат (атрибут trans form-origin). Kak видим, здесь ука- 
зываются лишь горизонтальная и вертикальная координаты (координата точки зре- 
НИЯ ПО OCH 72-- ЭТО фактически перспектива, задаваемая атрибутом СТИЛЯ 
регѕресі ive). Если вертикальная координата не указана, она получит значение 503. 


Значение атрибута perspective-origin по умолчанию: 50% 50$ (т. е. проекция точки 
зрения находится в центре контейнера). 


Атрибут perspective-origin, как и атрибут perspective, указывается для контейне- 
ра элементов, к которым будут применены трехмерные трансформации. 


В следующем примере мы задаем перспективу, местоположение точки зрения и 
трехмерное преобразование, которое будет выполнено с учетом нового расположе- 
ния точки зрения: 


body { perspective: 300px; perspective-origin: right top } 
#img1 { transform: rotateY(175deg) } 


2.23.4. Скрытие обратной стороны элемента 


Рассмотрим код листинга 2.15. 


Листинг 2.15. Пример трансформации элемента 


body { perspective: 300px ) 
#transformed { font-size: 36pt; width: 150px; background-color: black; 
color: white; transform: rotateY(175deg) } 


<div id="transformed">Bjzok 1</div> 


Он создает контейнер с идентификатором transformed и поворачивает его относи- 
тельно вертикальной оси на 175% по часовой стрелке. В результате контейнер ока- 
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Рис. 2.5. Перевернутый элемент страницы с видимой «обратной» стороной 


жется, если так можно сказать, перевернутым, и мы увидим его «обратную» сторо- 
ну (рис. 2.5). 


В некоторых случаях, например при создании с помощью трансформации трехмер- 
ных фигур, подобный результат неприемлем. Поэтому нам может потребоваться 
скрыть «обратную» сторону таких перевернутых элементов. 


Для этого мы воспользуемся атрибутом backface-visibility. Он поддерживает два 
значения: 


П visible — сделать «обратную» сторону элемента видимой (значение по умолча- 
нию); 


O hidden — полностью скрыть элемент, если он окажется повернутым к посетите- 
лю своей «обратной» стороной. 


Атрибут backface-visibility указывается непосредственно для элемента, к KOTO- 
рому применяются трехмерные трансформации: 


#transformed { font-size: 36pt; width: 150px; background-color: black; 
color: white; transform: rotateY(175deg); 
backface-visibility: hidden } 


Теперь Web-6paysep вообще не выведет на экран контейнер transformed. Что впол- 
не понятно — ведь этот элемент оказался повернутым к наблюдателю своей «об- 
ратной» стороной. 


2.23.5. Режим проецирования элементов на контейнер 


По умолчанию элементы, находящиеся в контейнере, к которому были применены 
трехмерные трансформации, отображаются в его плоскости. Если мы применим 
трехмерные трансформации и к ним, они так и останутся проекциями на плоскость 
контейнера. 


Рассмотрим пример кода, приведенный в листинге 2.16. 


Листинг 2.16. Трехмерные трансформации вложенных элементов 


body { perspective: 300px ) 
#cont { width: 250px; height: 250px; background-color: yellow; 
transform: rotateX (45deg); margin: 20px 0 0 150px } 
#ch { width: 150px; height: 150px; background-color: red; 
transform: translate3d(50px, 50px, 100px) } 


<div id="cont"> 
<div id="ch"></div> 
</div> 
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Здесь мы создали два вложенных друг в друга контейнера и задали для них трех- 
мерные трансформации: «внешний» контейнер повернули, а вложенный в него 
сместили, в том числе и по оси 2, чтобы визуально приподнять его над «внешним». 


Результат, который покажет нам \еБ-браузер, представлен на рис. 2.6. Видно, что 
вложенный контейнер так и находится в плоскости «внешнего». 


Рис. 2.6. Вложенный контейнер Рис. 2.7. Вложенный контейнер 
находится в плоскости «внешнего» вышел из плоскости «внешнего» 


Однако мы можем сделать так, чтобы вложенные элементы в случае применения 
к ним трехмерных трансформаций вышли бы из плоскости контейнера и отобража- 
лись в виде проекции непосредственно на странице. Так можно создавать трехмер- 
ные фигуры. 


Режим проецирования элементов на контейнер, В который они вложены, задается 
с ПОМОЩЬЮ атрибута transform-style, поддерживающего два значения: 


O ғ1а+ — элементы выводятся в виде проекции на поверхность контейнера (значе- 
ние по умолчанию); 


П рхгезегуе-за — элементы существуют в воображаемом трехмерном пространстве 
отдельно от контейнера и отображаются как проекции непосредственно на по- 
верхности страницы. 


Если мы добавим к приведенному в листинге 2.16 С55-коду стиль: 


#cont { transform-style: ргеѕегуе-3а } 


то У/еһ-браузер выведет нам изображение, показанное на рис. 2.7. Мы видим, что 
вложенный контейнер вышел за пределы «внешнего» и существует как бы отдель- 
но от него. 


2.23.6. Позиционирование точки начала координат 
для трехмерных трансформаций 


Для трехмерных трансформаций предусмотрен расширенный формат атрибута 
transform-origin, Указывающего местоположение точки начала координат: 


transform-origin: <Х> <Ү> <2> 


По умолчанию значение координаты по оси 2 — 0. 
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Пример: 


transform: гобабех(0.2гаа); transform-origin: left top 200px; 


2.23.7. Сложные трехмерные трансформации 


Для создания сложных трехмерных трансформаций мы можем пользоваться уже 
знакомым нам приемом, указывая функции, задающие отдельные трансформации, 
через пробел: 


transform: ёгапѕ1аіе7 (-200рх) rotateY (30аеа) ; 
Мы также можем смешивать двумерные и трехмерные преобразования: 


transform: skewX(15deg) гочағе2(-45аеа); 


2.24. Медиазапросы и адаптивный дизайн 


По умолчанию стили применяются ко всем устройствам. Однако сушествует воз- 
можность указать разные таблицы стилей для разных устройств. Стили создаются 
для следующих типов устройств: 


С all — для любых устройств (значение по умолчанию); 

С ѕсгееп — для экрана монитора; 

П print — для предварительного просмотра и распечатки документа; 

С speech — программы для чтения текста вслух (например, речевые браузеры). 


Тип устройства можно указать несколькими способами. При подключении внешне- 
го файла со стилями используется параметр тедіа="<Медиазапрос>" тега <link>: 


<link rel="stylesheet" type="text/css" media="all" рхеЁ="а11.с$$"> 
<link rel="stylesheet" type="text/css" media="print" href="print.css"> 
<link rel="stylesheet" type="text/css" media="screen" href="screen.css"> 


Подключить внешний (С55-файл можно также с помощью правила import: 
Qimport url (<ОКІ-адрес>) [ <Медиазапрос>]; 

Qimport <0КІ-адрес>[ <Медиазапрос>1; 

Правило @1троге должно быть расположено внутри тега <style>: 


<style type="text/css"> 
Qimport "print.css" print; 
</style> 


Внутри С55-кода используется правило emedia: 


@пеЯ1а <Медиазапрос> { 
/* Стили для указанного устройства */ 
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Вот пример указания цвета фона документа для экрана монитора: 


@теаіа screen ( 
body { background: green } 
} 


В параметре <медиазапрос> можно указывать не только тип устройства, но и целые 
логические выражения. Стили будут применены только в том случае, если логиче- 
ское выражение истинно. В логических выражениях используются следующие опе- 
раторы: 


О аһа — логическое и. Если тип устройства — экран монитора и его ширина 
меньше или равна 600 пикселам, то фон етраницы будет красным, а в противном 
случае — зеленым: 


body { background: green } 

media screen and (max-width: 600px) { 
body { background: red } 

} 


O not — логическое отрицание. Позволяет изменить результат логического выра- 
жения на противоположный: 


body 1 background: green } 

media not screen and (max-width: 600px) { 
body { background: red } 

} 


B этом примере при ширине экрана меньше или равной 600 пикселам фон стра- 
ницы будет зеленым, а в противном случае-- красным. Приоритет оператора 
not меньше приоритета оператора ала, поэтому вначале будет вычислено выра- 
жение с оператором ала, а лишь затем с оператором not; 


O запятая — логическая операция или. Если ширина экрана меньше (или равна) 
600 пикселов или больше (или равна) 800 пикселов, то фон страницы будет крас- 
ным, а в противном случае — зеленым: 


body { background: green } 
media screen and (max-width: 600px), 
screen and (min-width: 800px) { 
body { background: red } 
} 


Можно указывать сразу несколько логических выражений в одной инструкции. 
Если ширина экрана больше (или равна) 600 пикселов и меньше (или равна) 
800 пикселов, то фон страницы будет красным, а в противном случае -- зеленым: 


body { background: green } 
@пе а screen and (min-width: 600px) and (max-width: 800px) 1 
body { background: red } 
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Перед типом устройства допускается указание необязательного ключевого слова 
only: 


@media only screen { } 

Эта инструкция эквивалента следующей: 

Өтейіа screen { } 

Характеристики устройства задаются с помощью следующих атрибутов: 


П width, min-width и max-width — ширина области просмотра. Цвет фона страницы 
будет красным, если ширина равна 600 пикселам, в противном случае — зеле- 
ным: 


body { background: green } 

media screen and (width: 600px) { 
body { background: red } 

} 


O height, min-height H max-height — высота области просмотра; 


П азресі-гаііо, min-aspect-ratio И max-aspect-ratio— соотношение сторон. Зна- 
чения указываются через символ Ге 


@тедӢіа screen апа (аѕресё-гаёіо: 16/9) { } 
П orientation — ориентация: landscape (альбомная) или portrait (портретная): 


@media screen апа (orientation: landscape) { } 


П resolution, min-resolution И max-resolution — разрешение устройства. Значение 
указывается в единицах измерения dpi (точки на дюйм) ИЛИ арсм (точки на сан- 
тиметр): 


@теЯ1а print апа (resolution: 300арі) (0) 
п color, тіп-со1ог И пах-со1ог — ЧИСЛО битов на канал цвета: 
Өтесіа screen апа (color: 8) { } 


Если значение не указано, то проверяется, что устройство поддерживает цвет: 


@media screen апа (color) { } 


п со1ог-іпаех, тіп-со1ог-іпаех И тах-со1ог-іпаех — количество цветов в таблице 
или нуль, если устройство не использует таблицу цветов: 


Өбтейіа screen апа (соїіог-іпадех: 0) { } 


п monochrome, шіп-попосһготе И тах-топосһгопе — определяют, является ли устрой- 
ство монохромным: 


@теаіа print апа (monochrome) { } 
Используя медиазапросы, мы можем создать адаптивный дизайн страницы. Такая 


страница будет подстраивать содержимое под различную ширину экрана и учиты- 
вать другие характеристики устройства, например ориентацию экрана смартфона. 
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Помните, что мобильный Интернет стал доступным всем, поэтому не забывайте 
про владельцев смартфонов и планшетов, т. к. их становится все больше и больше. 


\еБ-браузер Firefox содержит инструмент, который позволяет наглядно увидеть 
как отображается содержимое страницы при различных характеристиках устройст- 
ва. Перейдите в главное меню и выберите пункт Разработка | Адаптивный дизайн 
или нажмите комбинацию клавиш <Сігі>+<51#>+<М>. В окне \!еБ-браузера oro- 
бразится содержимое страницы внутри рамки. Размер этой рамки можно задать, 
введя ширину и высоту в поля ввода, расположенные над рамкой, или взявшись 
мышью за правую или нижнюю границу. В заголовке рамки содержится список 
доступных устройств с уже настроенными характеристиками, а также значок, с по- 
мощью которого можно изменить ориентацию экрана. 


ПРИМЕЧАНИЕ 


Медиазапросы поддерживают также теги <img> (см. разд. 1.6.1) и <picture> (см. 
разд. 1.6.3). 


2.25. Проверка С$$-кода 
на соответствие стандартам 


После создания документа, содержащего каскадные таблицы стилей, его необхо- 
димо проверить на отсутствие ошибок и соответствие стандартам. Ведь можно слу- 
чайно допустить опечатку в названии атрибута или указать некорректное значение. 
\еб-браузеры обычно не сообщают об ошибках, а пытаются их обработать. По- 
этому о существовании ошибок можно узнать только в случае, если \МеБ-браузер 
неправильно их обработал, и это видно в его окне. 


Для проверки С$8-кода предназначен сайт http://jigsaw.w3.0org/css-validator/. Что- 
бы проверить документ, размещенный в Интернете, достаточно ввести ОКІ -адрес и 
нажать кнопку Проверить. Можно также загрузить файл или вставить (С55-код 
в поле ввода многострочного текста. Если после проверки были обнаружены ошиб- 
ки, то будет выведено их подробное описание. После исправления ошибок следует 
повторно проверить С55-код. 


ВНИМАНИЕ! 


Если С$$-код встроен в НТМІ-документ, то сначала нужно проверить сам документ на 
отсутствие ошибок (см. разд. 1.16). 


ГЛАВА 3 


Основы JavaScript. 
Создаем страницы, реагируюшие 
на действия пользователей 


3.1. Первые шаги 


JavaScript — это язык программирования, позволяющий сделать М№еб-страницу HH- 
терактивной, т. е. реагирующей на действия пользователя. 


Последовательность инструкций (называемая программой, скриптом или сценари- 
ем) выполняется интерпретатором, встроенным в \еБ-браузер. Иными словами, 
код программы внедряется в НТМГ-документ и выполняется на стороне клиента. 
Для выполнения программы даже не нужно перезагружать \Меб-страницу. Все npo- 
граммы выполняются в результате возникновения какого-то события. Например, 
перед отправкой данных формы можно проверить их на допустимые значения и, 
если значения не соответствуют ожидаемым, запретить отправку данных. 


3.1.1. Первая программа на JavaScript 


При изучении языков программирования принято начинать с программы, выводя- 
щей надпись «Hello, world». Не будем нарушать традицию и продемонстрируем, 
как это будет выглядеть на JavaScript (листинг 3.1). 


Листинг 3.1. Первая программа 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<title>lepsaa nmporpamma</title> 
</head> 
<body> 
<script> 
document.write ("Не11о, world"); 
</script> 
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<noscript> 


<р>Ваш Мер-браузер не поддерживает JavaScript</p> 
</повсгіре> 
</body> 
</html> 


Открываем редактор Notepad++ и создаем новый документ. B меню Кодировки 
устанавливаем флажок Кодировать в ОТЕ-8 (без ВОМ). Набираем код и сохраня- 
ем в формате HTML, например, под именем test.html. Запускаем \МеБ-браузер и oT- 
крываем сохраненный файл. 


Возможны следующие варианты: 
С в окне УУер-браузера отображена надпись Hello, world — значит, все нормально; 


П отобразилась надпись Ваш УҮеһ-браузер не поддерживает JavaScript и Web- 
браузер задает вопрос Запустить скрипты? — значит, в настройках Web- 
браузера установлен флажок Подтверждать запуск скриптов. Можно либо 
установить флажок Разрешить запуск скриптов, либо каждый раз отвечать Да 
на этот вопрос; 


П отобразилась надпись Ваш УҮеһ-браузер не поддерживает JavaScript и Web- 
браузер не задает никаких вопросов — значит, в настройках \!еБ-браузера уста- 
новлен флажок Запретить запуск скриптов. Надо установить флажок Разре- 
шить запуск скриптов; 


O в окне \!еБ-браузера нет никаких надписей — значит, допущена опечатка в коде 
программы. Следует иметь в виду, что в JavaScript регистр имеет важное значе- 
ние — строчные и прописные буквы считаются разными. Более того, каждая 
буква, каждая кавычка имеет значение. Достаточно ошибиться в одной букве, и 
вся программа работать не будет. 


Итак, мы столкнулись с первой проблемой при использовании JavaScript — любой 
пользователь может отключить запуск скриптов в настройках \еБ-браузера. Но эта 
проблема не единственная. Разные \еБ-браузеры могут по-разному выполнять код 
программы. По этой причине приходится писать персональный код под каждый 
\еБ-браузер или пользоваться ЈауаЅсгірі-библиотеками — например, jQuery. Все 
примеры скриптов в этой книге написаны под браузер Firefox версии 56 и могут не 
работать в других \!еБ-браузерах. Увы, но просто использовать Web-6paysep 
Firefox не достаточно — нужно еще учитывать его версию. Если у вас установлена 
более новая версия, то все должно работать, но в более ранних версиях некоторые 
возможности окажутся недоступны. Это следует помнить. 


3.1.2. Тег <script> 


Вернемся к нашему примеру. Программа внедряется в НТМІ.-документ с помощью 
парного тега <script>. Тег имеет следующие параметры: 


П type — задает МІМЕ-тип содержимого. Для JavaScript указывается значение 
text/javascript. В HTML 5 это значение используется по умолчанию, поэтому 
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его можно не указывать, но в предыдущих версиях нужно указывать обяза- 
тельно: 


<script type="text/javascript"> 
document.write ("Hello, world"); 
</script> 


П src — позволяет указать интернет-адрес (URL) файла с программой: 


<script type="text/javascript" src="script.js"></script> 


П defer — программа, расположенная во внешнем файле, будет выполнена только 
после полной загрузки \!е6-страницы: 


<script src="script.js" defer></script> 


П async — программа, расположенная во внешнем файле, может быть выполнена 
асинхронно. По умолчанию Меб-браузер выполняет инструкции построчно и, 
дойдя до тега <script>, загружает и разбирает программу, не выполняя при этом 
разбор НТМГ-кода. Иными словами, пока программа не загрузится в окне 
\!еБ-браузера, пользователь ничего не увидит. Параметр async снимает эту бло- 
кировку и выполняет обе операции параллельно. Параметр доступен только 
в НТМІ, 5: 


<script src="script.js" азупс></вскіре> 


Если Web-6paysep не поддерживает JavaScript, или выполнение скриптов запреще- 
но в настройках \еБ-браузера, то будет выведен текст между тегами <noscript> 
И </повсгіре>. 


Ранее содержимое тега <script> заключалось также в теги НТМІ -комментария <!-- 
И -->: 

<script type="text/javascript"> 

а 

document.write ("Не11о, world"); 

//--> 

</script> 


поскольку УУеВ-браузеры, не поддерживающие JavaScript, выводят код скрипта 
в виде обычного текста. 


Дело в том, что интерпретатор JavaScript игнорирует открывающий тег HTML- 
комментария (<!--), т. к. никакая строка программы JavaScript не может начинаться 
с символа <. Но закрывающий тег НТМГ-комментария (-->), начинающийся с двух 
минусов (--), распознается интерпретатором как ошибка, т. к. в JavaScript имеется 
предопределенный оператор --. По этой причине перед закрывающим тегом необ- 
ходимо поставить символы комментария языка JavaScript (//): 


//--> 


ПРИМЕЧАНИЕ 


В настоящее время практически все У/ер-браузеры распознают тег <script>. Поэтому 
особого смысла заключать программу в символы комментария нет. 
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3.1.3. Местоположение программы 


В листинге 3.1 мы поместили тег <script> внутри раздела вору и для вывода надпи- 
си «Hello, world» в окно УУер-браузера воспользовались методом write () встроен- 
ного объекта document: 


document.write ("Не11о, world"); 


Доступ к методу или свойству объекта осуществляется с помощью точечной HOTA- 
ции. Параметры, передаваемые методу, указываются внутри круглых скобок, рас- 
положенных после названия метода. В нашем примере мы передаем методу write () 
строку "Hello, world". Текст строки указывается внутри кавычек. Обратите внима- 
ние: каждая инструкция в JavaScript заканчивается точкой с запятой. Это можно 
сравнить с точкой в конце предложения. 


ПРИМЕЧАНИЕ 

Необходимо заметить, что это необязательное требование. Если инструкция распо- 
ложена на отдельной строке, то точку с запятой можно не указывать. Тем не менее 
рекомендуется указывать точку с запятой в конце каждой инструкции. Это позволит 
избежать множества ошибок в дальнейшем. 


Тег <script> наиболее часто располагается в разделе HEAD (листинг 3.2). 


Листинг 3.2. Размещение программы в разделе HEAD 


<!DOCTYPE html> 

<html lang="ru"> 

<head> 
<meta charset="utf-8"> 
<title>Pasmemenne программы в разделе HEAD</title> 
<script> 


function printHelloWorld() { 
var div1 = document.getElementById ("аіу1"); 
div1.innerHTML = "Hello, world"; 


} 
</script> 
</head> 
<body onload="printHelloWorld()"> 
<div id="div1">Bam Мер-браузер не поддерживает JavaScript</div> 
</body> 
</html> 


В этом случае пользоваться методом write () нельзя, T. к. он используется только 
при формировании содержимого документа во время загрузки страницы. Чтобы 
иметь возможность вывести что-либо в окно УҮеВ-браузера, вначале нужно полу- 
чить ссылку на какой-либо элемент с помощью метода getElementById() объекта 
document, а затем воспользоваться свойством innerHTML: 


var div1 = аоситепі .дееЕ1етептЕВутТа ("аіу1"); 
div1.innerHTML = "Hello, world"; 
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Для создания уникального идентификатора элемента нужно воспользоваться пара- 
метром id, который имеют все теги: 


<div id="div1"></div> 


Следует также учитывать, что по умолчанию код программы, расположенный 
в разделе HEAD, выполняется раньше, чем сформируется структура HTML- 
документа. В итоге мы будем получать ссылку на элемент, которого еще не суще- 
ствует. Чтобы этого избежать, код программы размещен внутри тела функции 
printHelloWorld() (внутри фигурных скобок). В этом случае функция будет загру- 
жена, но код внутри нее будет выполнен только при вызове функции. Когда же 
функция будет вызвана? Получить доступ к элементу страницы можно только 
после полной загрузки страницы, т. е. при наступлении события окончания загруз- 
ки страницы. Задать обработчик этого события позволяет параметр onload, разме- 
щенный в теге <body>: 


<body onload="printHelloWorld()"> 


Если программа расположена внутри раздела BODY после кода создания элемента, 
например в самом конце раздела вору, то назначать обработчик события окончания 
загрузки страницы не нужно, т. к. элемент уже существует, и мы можем к нему об- 
ратиться: 


<div іа="аіу1">Ваш Мер-браузер не поддерживает JavaScript</div> 
<script> 


var div1 = document.getElementById("div1"); 
div1.innerHTML = "Hello, world"; 
</script> 


Программа может быть расположена в отдельном файле c расширением js (лис- 
тинг 3.3). В этом случае файл подключается с помощью параметра src тега 
<script> (листинг 3.4). 


Листинг 3.3. Содержимое файла script.js 


function printHelloWorld() { 


var div1 = document .getElementById("div1"); 
div1.innerHTML = "Hello, world"; 


Листинг 3.4. Размешение программы в отдельном файле 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<title>PasmemeHnne программы в отдельном þaňzıe</title> 


<script src="script.js"></script> 
</head> 
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<body onload="printHelloWorld () "> 

<div id="div1">Bam Мер-браузер не поддерживает JavaScript</div> 
</body> 
</html> 


Здесь мы также заключили код внутри тела функции и указали ее в качестве обра- 
ботчика события onload. 


Если для тега <script> указан параметр defer (листинг 3.6), то код внутри файла 
script.js (листинг 3.5) будет выполнен только после полной загрузки страницы. 
В этом случае назначать обработчик для события оп1оаа не нужно. 


Листинг 3.5. Содержимое файла ѕсгірёјѕ 


var div1 = document.getElementById("div1"); 
div1.innerHTML = "Hello, world"; 


Листинг 3.6. Параметр defer 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<title>Ilapamerp defer</title> 
<script src="script.js" defer></script> 
</head> 
<body> 
<div id="div1">Bam Мер-браузер не поддерживает JavaScript</div> 
</body> 
</html> 


Опять-таки, если код загрузки программы расположен после кода создания элемен- 
та, к которому мы обращаемся, и не расположен внутри тела функции, то обработ- 
чик события onload не нужен: 


<div іа="аіу1">Ваш Мер-браузер не поддерживает JavaScript</div> 
<script src="script.js"></script> 


3.1.4. Консоль в У/еһ-браузере Firefox 


Как вы уже знаете, У/ер-браузер Firefox содержит Инструменты разработчика. 
В состав этого средства входит Веб-консоль, в которую выводятся различные со- 
общения — например, при наличии ошибок в программе. Чтобы открыть консоль, 
переходим в главное меню и выбираем пункт Разработка | Веб-консоль или 
нажимаем комбинацию клавиш <Сігі>-<85һІҢ>--<К>. В результате отобразится 
содержимое вкладки Консоль. 
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В верхней части вкладки Консоль расположены переключатели Сеть, CSS, JS, 
Защита, Журнал и Сервер, с помощью которых можно включить или отключить 
вывод сообщений в окно консоли. Убедитесь, что все переключатели подсвечены 
светло-синем цветом. Если фон переключателя белого цвета, то вывод сообщений 
отключен. Держите консоль всегда открытой при написании и отладке программы, 
и вы сразу заметите наличие в программе ошибок. 


Консоль можно также использовать для вывода отладочной информации. К этому 
способу мы будем очень часто прибегать для вывода результатов выполнения 
учебных скриптов. Для вывода сообщения в консоль служит такой код: 


<script> 
console.log ("Не11о, world"); 
</script> 


Сообщение Hello, world отобразится на вкладке Консоль, если переключатель 
Журнал подсвечен светло-синем цветом. 


Нас будет также интересовать вкладка Отладчик, которая открывается при нали- 
чии ошибок в процессе загрузки страницы. На этой вкладке существует возмож- 
ность выполнять программу по шагам, отслеживая значения различных перемен- 
ных, — очень удобное средство для поиска ошибок в программе, особенно логи- 
ческих. 


\еБ-браузер Firefox содержит также Простой редактор JavaScript, который мож- 
но использовать при выполнении скриптов в контексте текущей УУер-страницы, 
получая и изменяя свойства элементов. Чтобы открыть редактор, переходим 
в главное меню и выбираем пункт Разработка | Простой редактор JavaScript или 
нажимаем комбинацию клавиш <Shift>+<F4>. Редактор подсвечивает код разными 
цветами, а также позволяет закончить слово или вывести список возможных вари- 
антов. Для этого нужно ввести первые буквы слова и нажать комбинацию клавиш 
<С1>+<Пробел>. Чтобы получить список свойств и методов объекта, надо после 
ввода точки нажать комбинацию клавиш <Сігі>+<Пробел>. Для запуска программы 
нажимаем кнопку Запустить или комбинацию клавиш <Сіті>+<К>. 


3.1.5. Комментарии в JavaScript 
Все, что расположено после символов // до конца строки, в JavaScript считается 
однострочным комментарием: 


// Однострочный комментарий 


Однострочный комментарий можно записать после инструкции: 

document.write ("Не11о, world"); // Однострочный комментарий 

Кроме того, существует многострочный комментарий. Он начинается с символов 
/* и заканчивается символами */: 

у ж 


Многострочный комментарий 


%% 
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3.1.6. Окно с сообшением и кнопкой ОК 


Прежде чем начинать изучение языка JavaScript, рассмотрим встроенные диалого- 
вые окна, которые позволят нам выводить результаты работы программы или зна- 
чения переменных, а также вводить данные. 


Метод а1егЕ() отображает диалоговое окно с сообщением и кнопкой ОК. В лис- 
тинге 3.7 демонстрируется вывод приветствия с помощью метода alert (). 


Листинг 3.7. Метод alert () 


<!DOCTYPE html> 

<html lang="ru"> 

<head> 
<meta charset="utf-8"> 
<title>Meron alert ()</title> 

</head> 

<body> 

<script> 


window.alert ("Hello, world"); 
</script> 
</body> 
</html> 


Обьект window перед методом alert () указывать необязательно: 


alert ("Не11о, world"); 


Сообщение можно разбить на строки с помощью последовательности символов \п: 


alert ("Строка1 \пСтрока2\п\пСтрока4"); 


3.1.7. Окно с сообщением и кнопками ОК и Cancel 


Метод confirm() отображает диалоговое окно с сообщением и двумя кнопками ОК 
и Cancel (листинг 3.8). Он возвращает логическое значение true, если нажата KHON- 
ка ОК, и false — если Cancel. 


Листинг 3.8. Метод confirm() 


<!DOCTYPE html> 

<html lang="ru"> 

<head> 
<meta charset="utf-8"> 
<title>Merog confirm()</title> 

</head> 

<body> 

<script> 
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if (міпдйом.сопһҒітті("Нажмите одну из кнопок")) { 
alert ("Нажата кнопка ОК"); 

} 

else { 
alert ("Нажата кнопка Cancel"); 

} 

</script> 

</body> 

</html> 


Обьект window перед методом confirm() указывать необязательно: 


if (confirm ("Нажмите одну из кнопок")) (2...) 


3.1.8. Окно с полем ввода и кнопками ОК и Cancel 


Метод prompt () отображает диалоговое окно с сообщением, полем ввода и двумя 
кнопками ОК и Cancel (листинг 3.9). Он возвращает введенное значение, если 
нажата кнопка ОК, или специальное значение null, если нажата кнопка Cancel. 


Листинг 3.9. Метод prompt () 


<!DOCTYPE html> 

<html lang="ru"> 

<head> 
<meta charset="utf-8"> 
<title>Merog prompt ()</title> 


</head> 

<body> 

<script> 

var n = window. prompt ("Введите ваше имя", "Это значение по умолчанию"); 
if (n === null) { 


document.write ("Вы нажали Cancel"); 
} 
else { 
document.write ("Привет " + п); 
} 
</script> 
</body> 
</html> 


Объект window перед методом prompt () указывать необязательно: 


var п = prompt ("Введите ваше имя", "Это значение по умолчанию"); 
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3.1.9. Јауа$сгірё-библиотеки 


Мы уже не раз упоминали, что разные \МеБ-браузеры могут по-разному выполнять 
код программы. По этой причине при написании приложений приходится учиты- 
вать особенности каждого \!еБ-браузера. Проблема заключается в том, что устано- 
вить все версии каждого \МеБ-браузера на один компьютер практически невозмож- 
но, а значит, обеспечить полную кроссбраузерность самостоятельно не получится. 


При использовании библиотек любой программист может сообщить о проблеме 
в каком-либо М№еб-браузере, а разработчик библиотеки, опираясь на это сообщение, 
имеет возможность обработать ошибку. После исправления ошибки всем осталь- 
ным программистам достаточно сменить версию библиотеки. Таким образом, ис- 
пользуя возможности какой-либо библиотеки, можно забыть о проблеме с кросс- 
браузерностью приложения. 


Наиболее часто используются следующие Јауа$Ѕсгірі-библиотеки: 
O jQuery — http://jquery.com/; 

O Prototype — http://prototypejs.org/; 

O MooTools — https://mootools.net/; 

O Dojo — http://dojotoolkit.org/; 

O Yahoo! UI Library (YUI) — https://yuilibrary.com/. 


Из этого списка хотим особо выделить библиотеку jQuery, предоставляюшую 
функциональность, которую может использовать практически любой разработчик. 
Она обеспечивает кроссбраузерную поддержку приложений, имеет небольшой раз- 
мер и не засоряет глобальное пространство имен тривиальными идентификаторами. 
Большой популярности jQuery способствовали также дополнительные модули, pea- 
лизующие готовые компоненты или добавляющие новую функциональность. На- 
пример, библиотека jQuery UI добавляет возможность перемещения и изменения 
размеров любых элементов с помощью мыши, позволяет сортировать и выделять 
элементы, а также предоставляет готовые компоненты ("аккордеон", панель 
с вкладками, диалоговые окна, календарь и др.). 


Давайте попробуем подключить библиотеку jQuery и вывести приветствие с ее 
помощью (листинг 3.10). Предварительно нужно скачать библиотеку со стра- 
ницы http://jquery.com/download/. Скачиваем файл, например, с названием 
јачегу-3.2.1.тіп.јѕ, размещаем его в одной папке с НТМГ-документом, а затем nepe- 
именовываем в jquery.js. 


Листинг 3.10. Вывод приветствия с помощью библиотеки jQuery 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<Е1Е1е>Вывод приветствия с помощью библиотеки jQuery</title> 


<script src="jquery.js"></script> 
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<script> 
$(function() { 
$ ("#div1").text("Hello, world"); 
}); 
</script> 
</head> 
<body> 
<div id="div1"></div> 
</body> 
</html> 


Этот код аналогичен коду из листинга 3.2, только он гораздо проше. Вначале, 
в разделе HEAD, мы подключаем библиотеку jQuery. Затем создаем анонимную 
функцию, которая будет вызвана, когда структура НТМІ-документа будет сформи- 
рована. Причем код функции будет выполнен, не дожидаясь загрузки других эле- 
ментов УУеВ-страницы, например изображений. 


Всю функциональность в библиотеке jQuery выполняет функция $ (). Она имеет 
псевдоним jQuery (): 


jQuery (function() { 
jQuery ("#div1").text("Hello, world"); 
Юю; 


Других идентификаторов в глобальную область видимости библиотека не добавля- 
ет, тем самым не засоряя ее. 


Функция $ () имеет несколько форматов. Наиболее часто используемый формат: 


5(<С55-селектор>) 


В качестве параметра мы можем задействовать С55-селекторы, которые мы уже 
изучили в предыдушей главе. В листинге 3.10 используется доступ к элементу по 
идентификатору: 


$ ("#div1").text("Hello, world"); 


Функция возврашает ссылку на один элемент или на целый набор элементов. 
Используя различные методы, можно выполнять над элементами те или иные опе- 
рации. Если функция возвращает набор элементов, то операции в большинстве 
случаев выполняются над всеми элементами из набора. Например, выведем текст 
приветствия во всех абзацах: 


<р></р> 
<р></р> 
<р></р> 
<script> 
$ (function() { 
5 ("р") .text("Hello, world"); 
Юю; 
</script> 
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Чтобы вывести текст только в первом абзаце, достаточно дополнительно указать 
псевдокласс :first: 


$("p:first").text("Hello, world"); 


Пользоваться библиотекой jQuery очень просто и очень эффективно, а главное — 
не нужно думать, будет ли код работать в каком-либо М№Меб-браузере. 


3.2. Переменные и типы данных 


Переменные -- это участки памяти, используемые программой для хранения дан- 
НЫХ. 


3.2.1. Именование переменных 


Каждая переменная должна иметь в программе уникальное имя, состоящее из ла- 
тинских букв, цифр и знаков подчеркивания. Первым символом может быть либо 
буква, либо знак подчеркивания. В названии переменной может также присутство- 
вать символ $. Имена переменных не должны совпадать с зарезервированными 
ключевыми словами языка JavaScript. 


Правильные имена переменных: 

x, strName, уі, папе, міпдом1 

Неправильные имена переменных: 

Ту, ИмяПеременной, window 

Последнее имя неправильное, потому что является ключевым словом. 


При указании имени переменной важно учитывать регистр букв: strName и 
strname — разные переменные. 


3.2.2. Объявление переменной 


В программе переменные объявляются с помощью ключевого слова таг: 


уаг х; 


Можно объявить сразу несколько переменных в одной строке, указав их через за- 
пятую: 


мала, Су 19 


3.2.3. Типы данных и инициализация переменных 


В JavaScript переменные могут содержать следующие типы данных: 
O number — целые числа или числа с плавающей точкой (дробные числа): 


console.log (typeof 1); // number 
console.log (typeof 2.0); // number 


o 


o 
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string — строки: 
console.log (typeof 'строка'); // string 


boolean — логический тип данных. Может содержать значения true (истина) ИЛИ 
false (ложь): 


console.log (typeof true); // boolean 


function — функции. В языке JavaScript ссылку на функцию можно присвоить 
какой-либо переменной. Для этого название функции указывается без круглых 
скобок. Кроме того, функции имеют свойства и методы: 


console.log (typeof function() {}); // function 


object -- массивы, объекты, а также переменная со значением null: 


сопзо1е.10од (typeof [1, 2, 31); // object 
console.log (typeof window); // object 
console.log (typeof null); // object 


undefined — неопределенное значение: 


var str; 
console.log (typeof str); // undefined 


В этих примерах мы воспользовались оператором typeof, который возврашает 
строку, описываюшую тип данных переменной. Все значения будут выведены 
в консоль У/еһ-браузера. Не забудьте открыть консоль (см. разд. 3.1.4), чтобы 
видеть результаты выполнения учебных примеров. 


При инициализации переменной JavaScript автоматически относит переменную 
к одному из типов данных. Что такое инициализация переменных? Это операция 
присвоения переменной начального значения. 


Значение переменной присваивается с помошью оператора -: 


var x; 

x = 5; 

console.log (typeof x); // number 
console.log (х); ZLS 


Переменной может быть присвоено начальное значение сразу при ее объявлении: 


var у = 12.5; 
console.log (typeof у); // number 
console.log (у); 77 12.5 


При обьявлении можно задать начальные значения сразу нескольким переменным: 


var x = 5, у = 12.5, str = "Строка"; 


console.log (х); {7.35 
console.log (у); 2252255 
console.log (str); // Строка 
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3.2.4. Проверка сушествования переменной 


Если в программе обратиться к переменной, которая не объявлена, то возникнет 
критическая ошибка. Если переменная объявлена, но ей не присвоено начальное 
значение, то значение предполагается равным undefined: 


var x; 
console.log (х); // undefined 
console.log(str); // ReferenceError: str is not defined 


Проверить существование глобальной переменной можно следующим способом: 


if (window.str === undefined) { 
сопво1е.1о04("Переменная не существует"); 
} 
еізе { 
console. log ("Переменная существует"); 


} 


В этом примере, чтобы избежать ошибки обращения к несуществующей перемен- 
ной, мы воспользовались встроенным объектом window, через который доступны 
все глобальные переменные. Обращение через объект к несуществующему свойст- 
ву ошибки не генерирует. 


Пример обращения к глобальной переменной через объект window: 


уаг х = 10; 
сопво1е.1о4(міпдом.х); // 10 


Также мы воспользовались глобальным свойством undefined, которое содержит 
значение undefined. Название этого свойства не является зарезервированным клю- 
чевым словом, поэтому можно определить локальную переменную с таким именем, 
а вот изменить значение глобального свойства нельзя. 


Для проверки можно также воспользоваться оператором typeof: 


if (typeof str == "undefined") { 
сопво1е.1о04("Переменная не существует"); 
} 
else { 
console. log ("Переменная существует"); 


} 


В операторе typeof можно просто указать название переменной без объекта window, 
т. к. ошибка обращения к несуществующей переменной в этом случае не генериру- 
ется. 


3.2.5. Константы 


Константы служат для хранения значений, которые не должны изменяться во вре- 
МЯ работы программы. Создать константу можно с помощью ключевого слова 
сопзі: 


const <Имя константы» = <Значение константы; 
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Значение можно присвоить константе только при объявлении. После объявления 
изменить значение константы нельзя: 


const МҮ CONST = 10; 
сопво1е.104( МҮ СОМ$Т ); // 10 


Обратите внимание: в названии константы принято использовать буквы только 
в верхнем регистре. Если название константы состоит из нескольких слов, то меж- 
ду словами указывается символ подчеркивания. Это позволяет отличить внутри 
программы константу от обычной переменной. 


Как и при объявлении переменной, МОЖНО В ОДНОЙ инструкции объявить несколько 
констант через запятую: 


const МҮ СОМ$Т1 = 10, МҮ СОМ$Т2 = 5, МҮ СОМ$ТЗ = 88; 
Если мы присваиваем константе объект, то заменить этот объект другим нельзя, 
а вот изменить свойства объекта можно: 


const МҮ CONST = [1, 2, 3]; 


сопво1е.104( МҮ СОМӘТ ); // Атгау І 1, 2, 31 
МҮ СОМ5Т [0] = 88; 
сопво1е.104( МҮ СОМӘТ ); // Аггау [ 88, 2, 31 


Полная поддержка ключевого слова const появилась в браузерах Internet 
Explorer 11, Firefox 36.0, Chrome 49.0, Opera 36.0 и Safari 10.0. 


3.3. Операторы JavaScript 


Операторы позволяют выполнить с данными определенные действия. Например, 
операторы присваивания служат для сохранения данных в переменной, математи- 
ческие операторы позволяют произвести арифметические вычисления, а оператор 
конкатенации строк используется для соединения двух строк в одну. Операторы 
берут одно или два значения, представляюшие собой переменную, константу или 
другое выражение, содержашее операторы или функции, и возврашают одно значе- 
ние, определяемое по исходным данным. Рассмотрим доступные в JavaScript опера- 
торы подробно. 


3.3.1. Математические операторы 


В JavaScript доступны следующие математические операторы: 


O + — сложение: 


сопво1е.104( 10 + 15 ); 77-215 
П - — вычитание: 
сопво1е.1о4( 30 - 15 ); АЛЕ 


О * — умножение: 


сопво1е.1о4( 12 * 10 ); // 120 
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8 / — деление: 
сопво1е.1о4( 10/2); Б 
сопво1е.104( 10 / 3); // 3.3333333333333335 


Деление числа на 0 приведет к значению плюс или минус Infinity (бесконеч- 
ность), а деление числа 0 на 0 — к значению мам (нет числа): 


console.log( 10/0); // Infinity 
console.log( -10 / 0); // -Infinity 
console.log ( (ы 0). 5 // Мам 


О %-- остаток от деления: 


сопво1е.104( 10 % 2); // 0 
console.log( 10 % 3 ); AL 
console.log( 10 % 4); //? 


С ** — возведение в степень (оператор доступен только в последних версиях Web- 
браузеров, в старых версиях нужно использовать метод ром ()): 


сопзо1е.1оа4а( 10 ** 2); // 100 

console.log( 3 ** 3); // 27 

сопво1е.1042( -(3 ** 3) ); // -27 

console.log (Ма В.ром (10, 2)); // 100 
С - — унарный минус: 

мас х = 10; 

сопво1е.104( -x ); // -10 


С + — унарный плюс (преобразует значение в ТИП number): 


var п = "10"; 
маг x = +n; 
сопво1е.1оа( x ); // 10 
console.log( typeof x ); // number 

С ++ — оператор инкремента (увеличивает значение переменной на 1): 
var x = 10; 
х++; // Эквивалентно х =х + 1; 
console.log( x ); LA 1 

С -- — оператор декремента (уменьшает значение переменной на 1): 
var x = 10; 
х--; // Эквивалентно х =х - 1; 
console.log( x ); // 9 


Операторы инкремента и декремента могут использоваться в постфиксной или 
префиксной формах: 


х++; х--; // Постфиксная форма 


++х; --х; // Префиксная форма 
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В чем разница? При постфиксной форме (х++) возвращается значение, которое 
переменная имела перед операцией, а при префиксной форме (++х) — вначале вы- 
полняется операция и только потом возвращается значение. Продемонстрируем 
разницу на примере (листинг 3.11). 


Листинг 3.11. Постфиксная и префиксная формы 


<!DOCTYPE html> 
<html lang="ru"> 


<head> 


<meta charset="utf-8"> 
<title>llocrnkcHaa и префиксная þopmeK/title> 


</head> 
<body> 
<script> 


var x = 5, y; 


у = х++; 


var msg; 


msg = "<р>Постфиксная 
PAKDE Р, TKr >s pro 


msg += y 
x = 5; 
у = ++х; 


msg += "<р>Префиксная 
+ "<br>x = " + x; 


msg += y 

document 
</script> 
</body> 
</html> 


3.3.2. Побитовые операторы 


// у= 5, х 


// у = 6, 


.мгібе (msg); 


рорма 


рорма 


х++;):<" + "/рь<рг> у 


++х;):<" + "/р><рг> у 


В JavaScript доступны следующие побитовые операторы: 


O ~— двоичная инверсия. Значение каждого бита заменяется на противополож- 


ное: 


у = ~x; 


O = — двоичное и: 


маг х = 100, у = 75, 2; 
сопзо1е.1оа4( x.toString (2) 
сопво1е.104( y.toString (2) 
2 = х & у; 

сопзо1е.1о4( z.toString (2) 

O |--двоичное или: 

маг х = 100, у = 75, 2; 
console.log( x.toString (2) 


// 1100100 
// 1001011 


// 1000000 


// 1100100 
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сопво1е.104( у.іо5ігіпа(2) ); // 1001011 
2-х | у; 
сопво1е.104( 2.іоЅігіпа (2) ); // 1101111 


O ^ — двоичное исключающее или: 


маг х = 100, у = 250, 2; 


сопзо1е.104( x.toString(2) ); // 01100100 
сопво1е.104( у.іо5ігіпа(2) ); // 11111010 
р E 

сопво1е.104( 2.іоЅігіпа (2) ); // 10011110 


О << — сдвиг влево (сдвиг влево на один или более разрядов с заполнением млад- 
ших разрядов нулями): 


маг х = 100; 


сопзо1е.104( x.toString(2) ); // 001100100 
х= х << 1; 
сопѕо1е.109( х.іоЅігіпд (2) ); // 011001000 
х= х << 1; 
сопзо1е.109( x.toString(2) ); // 110010000 


С >> — сдвиг вправо (сдвиг вправо на один или более разрядов с заполнением 
старших разрядов содержимым самого старшего разряда): 


x= >> 1; 


СО >>> — сдвиг вправо без учета знака (сдвиг вправо на один или более разрядов 
с заполнением старших разрядов нулями): 


х = x >>> 1; 


Kak еледует из названия, побитовые операторы выполняют поразрядные действия 
с двоичным представлением целых чисел. 


3.3.3. Операторы присваивания 


Операторы присваивания предназначены для сохранения значения в переменной. 
В JavaScript доступны следующие операторы присваивания: 


С = — присваивает переменной значение: 
х = 5; 


Оператор = можно также использовать для распаковки объектов: 


var а = 0, b = 0, arr = [1, 2]; 
Га, b] = arr; 
console.log( a + ""+Ь }; // 12 
С += — увеличивает значение переменной на указанную величину: 


х += 5; // Эквивалентно х - х + 5; 


O -=— уменьшает значение переменной на указанную величину: 


х -= 5; // Эквивалентно х =х - 5; 
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O == — умножает значение переменной на указанную величину: 


х *= 5; // Эквивалентно х = х % 5; 


O /= — делит значение переменной на указанную величину: 


х /- 5; // Эквивалентно х - х / 5; 


O %---делит значение переменной на указанную величину и возвращает остаток: 


x 5= 5; // Эквивалентно X = X % 5; 


O s=, |=, ^=, <<=, >>= H >>> побитовые операторы с присваиванием. 


3.3.4. Операторы сравнения 


Операторы сравнения используются в логических выражениях. В JavaScript moc- 
тупны следуюшие операторы сравнения: 


O ----равно; 

О === — строго равно; 

О != — не равно; 

С !== — строго не равно; 
П <— меньше; 

O > — больше; 

С <= — меньше или равно; 
С >= — больше или равно. 


Логические выражения возвращают только два значения: true (истина) или false 
(ложь): 


сопво1е.104( 10 == 10 ); // true 

сопво1е.104( 10 == 5 ); // false 

console.log( 10 != 5 ); // true 

console.log( 10 52 $ // false 

console.log( 10 > 5 ); // true 

console.log( 10 <= 5 ); // false 

console.log( 10 >= 5 ); // true 

В чем отличие оператора == (равно) от оператора === (строго равно)? Дело все 
в том, что если используется оператор ==, интерпретатор пытается преобразовать 
разные типы данных к одному и лишь затем сравнивает их. Оператор ===, встретив 
данные разных типов, сразу возвращает false (ложь): 

console.log( 5 == '5' ); // true 

console.log ( === '5' ); // false 


Кроме того, значение логического выражения можно инвертировать с помощью 
оператора ! таким образом: 


сопво1е.104( 10 == 10 ); // troe 
сопво1е.1о04( !(10 == 10) ); // false 
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Если значения равны, то возвращается значение true, но так как перед выражением 
стоит оператор !, выражение вернет false. 


Несколько логических выражений МОЖНО объединить в одно большое с ПОМОЩЬЮ 
следующих операторов: 


П &5 — логическое и. Логическое выражение вернет true только в случае, если оба 
подвыражения вернут true: 


сопво1е.104( (10 == 10) && (5 != 3) ); // true 
сопво1е.104( (10 == 10) && (5 == 3) ); // false 
П || — логическое или. Логическое выражение вернет true, если хотя бы одно из 


подвыражений вернет true. Если первое подвыражение вернет значение true, TO 
второе подвыражение даже не будет ВЫЧИСЛЯТЬСЯ: 


сопво1е.104( (10 == 10) || (5 != 3) ); // true 
сопво1е.104( (10 == 10) || (5 == 3) ); // true 


Оператор || также часто используется для создания необязательных параметров 
В функции. Если первое выражение не может быть преобразовано В true, ТО ВОЗ- 
вращается значение второго выражения: 


function test(str) { 
str = str || "Значение по умолчанию"; 
return str; 


} 
console.log( test() ); // Значение по умолчанию 
console.log( test ("Значение указано") ); // Значение указано 


3.3.5. Приоритет выполнения операторов 


В какой последовательности будет вычисляться следующее выражение? 

var x= 5 + 10*3/2; 

console.log( x ); // 20 

Это зависит от приоритета выполнения операторов. В данном случае последова- 
тельность вычисления выражения будет следуюшей: 


1. Число 10 будет умножено на 3, т. к. приоритет оператора умножения выше при- 
оритета оператора сложения. 


2. Полученное значение будет поделено на 2, поскольку приоритет оператора 
деления равен приоритету оператора умножения (а операторы с равными при- 
оритетами выполняются слева направо), но выше, чем у оператора сложения. 


3. К полученному значению будет прибавлено число 5, т. к. оператор присваива- 
ния = имеет наименьший приоритет. 


4. Значение будет присвоено переменной х. 
Последовательность вычисления выражения можно изменить с помощью скобок: 


var x = (5 + 10) * 3/2; 
console.log( x ); // 22.5 
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Теперь порядок вычислений будет другим: 

1. К числу 5 будет прибавлено 10. 

2. Полученное значение будет умножено на 3. 

3. Полученное значение будет поделено на 2. 

4. Значение будет присвоено переменной х. 

Приведем операторы в порядке убывания приоритета: 

С ++, -- — постфиксный инкремент, постфиксный декремент; 


С !, ~, ++, --, +, - — отрицание, двоичная инверсия, префиксный инкремент, пре- 
фиксный декремент, унарный плюс, унарный минус; 


** — возведение в степень; 
х, /,  — умножение, деление, остаток от деления; 
+, - — сложение и вычитание; 

<<, >>, >>> — двоичные сдвиги; 


<, <=, >, >= — операторы сравнения; 


, =, ===, ! операторы сравнения; 
& — двоичное и; 
^ — двоичное исключающее или; 


| — двоичное или; 


+=, --, *=, /=, % присваивание; 


пачсаааочоаова д 


‚ — оператор «запятая». 


3.3.6. Преобразование типов данных 


Что будет, если к числу прибавить строку? 


var str = "5", x= 3; 

var varl = x + str; // Переменная содержит строку "35" 
console.log (var1); II -35 

console.log (typeof varl); // string 

var var2 = str + x; // Переменная содержит строку "53" 
console.log (уаг2); // 53 


console.log (typeof уаг2); // string 


В этом случае интерпретатор столкнется с несовместимостью типов данных и по- 
пытается преобразовать переменные к одному типу данных, а затем выполнить 
операцию. В нашем случае переменная x, имеющая тип number (число), будет npe- 
образована к типу string (строка), а затем будет произведена операция конкатена- 
ции строк. 


А что будет, если из числа вычесть строку, число умножить на строку или число 
разделить на строку? 
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маг str = "5", x = 15; 

var varl = x - str; // Переменная содержит число 10 
console.log (уаг1); // 10 

console.log (typeof varl); // number 

var var2 = x * str; // Переменная содержит число 75 
console.log (уаг2); Ж 

console.log (typeof уаг2); // number 

var var3 = x / str; // Переменная содержит число 3 
console.log (var3); // 3 

console.log (typeof var3); // number 


Интерпретатор попытается преобразовать етроку в число, а затем вычислить выра- 
жение. Причем не важно, в какой последовательности будут указаны число и строка: 


var var4 = str * x; // Переменная содержит число 75 
console.log (уаг4) ; // 75 
console.log (typeof уаг4); // number 


Но что будет, если в строке будут одни буквы? 


var str = "Строка", x = 15; 
var varl = x - str; // Переменная содержит значение NaN 
console.log (уаг1); // Мам 


console.log (typeof varl); // number 


В этом случае интерпретатор не сможет преобразовать строку в число и присвоит 
переменной значение мам (Not а Number, не число). 


С одной стороны, хорошо, что интерпретатор делает преобразование типов данных 
за нас. Но с другой стороны, можно получить результат, который вовсе не плани- 
ровался. По этой причине лучше оперировать переменными одного типа, а если 
необходимо выполнить преобразования типов, то делать это самим. 


Для преобразования типов данных можно использовать следующие встроенные 
функции JavaScript: 


П parseInt (<Строка>[, <Основание>1) — преобразует строку в целое число. Строка 
считается заданной в системе счисления, указанной вторым необязательным 
параметром. Если основание не указано, то система счисления выбирается авто- 
матически и зависит от префиксов в строке, — например, если строка начинает- 


ся с "Ох", то будет использоваться основание 16. Если строка не может быть пре- 
образована в число, возвращается значение NaN: 

сопво1е.1о4( parseInt ("10") ); // 10 

console.log( parseInt ("ОхЕЕ") ); // 255 

сопво1е.1о4( parseInt ("ОхЕЕ", 16) ); // 255 

сопво1е.104( parseInt ("0167", 8) ); // 119 

сопво1е.1о4( parseInt ("1110111", 2) ); // 119 

сопво1е.1о4( рагзеіпе("строка", 2) ); // Мам 

П parseFloat (<Crpoka>) — преобразует строку в число с плавающей точкой: 

сопво1е.104( parseFloat ("5.2") ); 777552 

console.log( parseFloat ("5е-2") ); // 0.05 

сопзо1е.109( parseFloat ("строка") ); // Мам 
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Для преобразования числа в строку используется метод toString ( [<Основание>]): 


var x = 10, у = 5.2; 


сопво1е.1о04( x.toString() ); // 10 
сопво1е.1о4( x.toString(8) ); УӘ 2 
console.log( y.toString() ); 92 


В качестве примера использования преобразования типов данных просуммируем 
два числа, введенные пользователем в поля двух диалоговых окон (листинг 3.12). 


Листинг 3.12. Вычисление суммы двух чисел 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<title>BbuncJIenne суммы двух unceJ</title> 
</head> 
<body> 
<script> 
var varl, var2, suml, sum2, msg; 
varl = window.prompt ("Введите число 1", ""); 
if (varl == null) { 
document.write ("Вы нажали Отмена"); 
} 
else { 
var2 = window.prompt ("Введите число 2", ""); 
if (var2 == null) ( 
document.write ("Вы нажали Отмена"); 


} 


else { 
$11 = varl + var2; 
msg = "До преобразования типов:<рг>Значение суммы чисел "; 
msg += varl + "и " + var2 + " равно "; 
msg += sumi + "<br><br>"; 
sum2 = parseInt (varl, 10) + parseInt (уаг2, 10); 
msg += "После преобразования TMNOB:<br>"; 
msg += "Значение суммы чисел " + varl + "и"; 
msg += var2 + " равно " + sum2; 


document.write (msg); 


} 
</script> 
</body> 
</html> 


Если в обоих диалоговых окнах набрать число 5, то в окне Web-6paysepa отобра- 
зится следующий текст: 
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До преобразования типов: 
Значение суммы чисел 5 и 5 равно 55 


После преобразования типов: 
Значение суммы чисел 5 и 5 равно 10 


Итак, диалоговые окна возвращают в качестве типа значения строку. Чтобы полу- 
чить сумму двух чисел, указанных в полях диалоговых окон, нужно обязательно 
ВЫПОЛНИТЬ преобразование типов, иначе мы получим еще одну строку, а не сумму. 


3.3.7. Оператор ветвления /%..е/5е 


Условные операторы позволяют в зависимости от значения логического выражения 
выполнить отдельный участок программы или, наоборот, не выполнять его. Логи- 
ческие выражения возвращают только два значения: true (истина) или false (ложь). 


Оператор ветвления 1+. ..е1зе имеет следующий формат: 


if (<Логическое выражение») { 
<Блок, выполняемый, если условие истинно> 


} 
[else { 
<Блок, выполняемый, если условие ложно> 


}] 


Оператор ветвления 1Е...е1зе мы уже использовали ранее в наших примерах — 
например, чтобы проверить, какая из кнопок диалогового окна нажата (см. лис- 
тинг 3.8). Так как при нажатии кнопки ОК возвращается значение true, то МОЖНО 
узнать, какая кнопка нажата, используя оператор ветвления 1Е...е1зе: 
if (міпдомч.сопҒітті("Нажмите одну из кнопок")) { 

alert ("Haxara кнопка ОК"); 
) 
else { 

alert ("Нажата кнопка Cancel"); 


} 

Обратите внимание: логическое выражение не содержит операторов сравнения: 
if (міпаои. сопЁігт ("Нажмите одну из кнопок")) { 

Такая запись эквивалентна записи: 

if (міпаои. сопЁігт ("Нажмите одну из кнопок") == true) { 


Проверка на равенство выражения значению true (истина) выполняется по умолча- 
нию. 


В качестве логического выражения можно указать просто значение, которое будет 
преобразовано В false в следующих случаях: 


О если число равно 0 или 0.0: 


console.log( !!0 ); // false 
сопво1е.1о42( !!0.0 ); // false 
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П если указана пустая строка: 


console.log( !!"" ); // false 


П если переменная содержит значение null: 


console.log( !!null ); // false 


O если переменная содержит значение NaN: 


сопзо1е.1оа( !!МаМ ); // false 


С если свойство объекта не существует, или переменной не присвоено начальное 


значение: 

маг obj = {}, x; 

console.log( !!obj.attr ); // false 
console.log( !!x ); // false 
console.log( !!undefined ); // false 


Все остальные значения будут преобразованы B true: 


сопво1е.1о42( 1110); // true 
сопво1е.1оа( !!"0" ); // true 
var obj = { n: 20 }; 

сопво1е.1о4( !!obj.n ); // true 


Для примера напишем программу (листинг 3.13), которая проверяет, является ли 
введенное пользователем число четным или нет. После проверки выводится соот- 


ветствующее сообщение А 


Листинг 3.13. Проверка числа на четность 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<Е1Е1е>Проверка числа на uerTHOocTb</title> 
</head> 
<body> 
<script> 


var х = window.prompt ("Введите число", ""); 
iF (х === га11) { 
console.log ("Bs нажали Отмена"); 
) 
else { 
if ( (рагзеіпе(х, 10) % 2) == ) { 
console.log ("Четное число"); 
} 
else { 
сопво1е.1о4("Нечетное число"); 
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</script> 
</body> 
</html> 


Как видно из примера, один условный оператор можно вложить в другой. Кроме 
того, если блок состоит из одной инструкции, фигурные скобки можно не указы- 
вать: 


if ( (рагзеіпе(х, 10) % 2) == ) console.log ("Четное число"); 
else сопво1е.1о4("Нечетное число"); 


Более того, блока е1зе может не быть совсем: 
if ( (рагзеіпе(х, 10) % 2) == ) console.log ("Четное число"); 
Для проверки нескольких условий часто используется следующий синтаксис: 


маг х - 2; 


1Е (х == 1) 1 


s 
І 
т 


console.log ( 


else if (x == 2) { 
console. log( "x = 2"); 


else if (x == 3) { 


console. log( "х = 3" ); 


else console.log( "Другое значение" ); 


3.3.8. Оператор ?: 


Оператор ?: имеет следующий формат: 


<Переменная> = (<Логическое выражение>) ? <Выражение если Истина> 
<Выражение если Ложь>; 


Перепишем нашу программу (см. листинг 3.13) и используем оператор ?: вместо 
1Е...е1зе (листинг 3.14). 


Листинг 3.14. Проверка числа на четность с помощью оператора ?: 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<title>llĪposepka числа на uerTHOocTb</title> 
</head> 
<body> 
<script> 


var x = window.prompt ("Введите число", ""); 
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іЁ (х === 0011) { 
console.log ("Вы нажали Отмена"); 

} 

else { 
var msg = ((рагѕеїІпі (х, 10) % 2) == 0) ? "Четное число" 

"Нечетное число"; 

console.log (msg); 

} 

</script> 

</body> 

</html> 


3.3.9. Оператор выбора switch 


Оператор выбора switch имеет следующий формат: 


switch (<Переменная или выражение>) { 
сазе <Значение 1>: 
<Выражение 1>; 
break; 

[ case <Значение 2>: 
<Выражение 2>; 
break; 

sas] 

[ default: 
<Выражение>; | 

} 


Перепишем нашу программу и используем оператор switch вместо іғ...еїѕе И ?: 
(листинг 3.15). 


Листинг 3.15. Проверка числа на четность с помощью оператора switch 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<Е1Е1е>Проверка числа на ueTHOocCTb</title> 
</head> 
<body> 
<script> 


тел) ; 


var x = window. prompt ("Введите число", 
If (х === null) { 
console. log ("Bs нажали Отмена"); 
} 
else { 


о 


switch ( рагѕеїІпі (х, 10) % 2) { 
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case 0: 
console. log ("Четное число"); 
ргеак; 
case 1: 
сопво1е.1о4("Нечетное число"); 
ргеак; 
default: 
сопво1е.1о04("Введенное значение не является числом"); 


} 
</script> 
</body> 
</html> 


Итак, оператор switch позволил сделать еше одну дополнительную проверку — 
ведь пользователь вместо числа мог ввести строку. А в этом случае функция 
parseInt () вернет значение NaN (Not а Number). Любая арифметическая операция со 
значением хам вернет в качестве значения мам. В предыдущих примерах мы не вы- 
полняли эту проверку, и в случае ввода строки, которую невозможно преобразовать 
в число, функция возвращала фразу "Нечетное число". Что, согласитесь, неверно. 


Вернемся к оператору switch. Вместо логического выражения оператор switch при- 
нимает переменную или выражение. В зависимости от значения переменной (или 
выражения) выполняется один из блоков сазе, в котором указано это значение. 
Если ни одно из значений не описано в блоках case, то выполняется блок default. 
Сравнение производится с помощью оператора === (строго равно). 


Оператор break позволяет досрочно выйти из оператора выбора switch. Зачем это 
нужно? Если не указать оператор break в конце блока case, то будет выполняться 
следующий блок сазе вне зависимости от указанного значения. Если убрать все 
операторы break из нашего примера, то в результате (при вводе четного числа) 
в консоли отобразятся следующие значения: 


Четное число 
Нечетное число 


Введенно значение н является числом 


Иными словами, оператор break следует обязательно указывать в конце каждого 
блока сазе. 


3.4. Циклы. 
Многократное выполнение блока кода 


Предположим, нужно вывести все числа от 1 до 100 по одному на строке. Обычным 
способом пришлось бы писать 100 строк кода: 

document.write ("1<рг>"); 

document.write ("2<рг>"); 


// 


document.write ("100<br>"); 
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При помощи циклов ТО же действие МОЖНО ВЫПОЛНИТЬ одной строкой кода: 
for (var і = 1; і < 101; i++) document.write(i + "<br>"); 


Иными словами, циклы позволяют выполнить одни и те же инструкции многократно. 


3.4.1. Цикл for 
Цикл for используется для выполнения инструкций определенное число раз. Он 
имеет следующий формат: 


for (<Начальное значение>; <Условие>; <Прирашение>) { 
<Инструкции> 
} 


Здесь присутствуют следующие конструкции: 
С <начальное значение> — присваивает переменной-счетчику начальное значение; 


O <Условие> — содержит логическое выражение. Пока логическое выражение 
возвращает значение true, выполняются инструкции внутри цикла. Обратите 
внимание: логическое выражение вычисляется на каждой итерации цикла; 


С <приращение> — задает изменение переменной-счетчика при каждой итерации. 
Последовательность работы цикла for: 
1. Переменной-счетчику присваивается начальное значение. 


2; Проверяется условие. Если оно истинно, выполняются инструкции внутри цик- 
ла, в противном случае выполнение цикла завершается. 


3. Переменная-счетчик изменяется на величину, указанную в параметре <При- 
ращение>. 


4. Переход к п. 2. 


Цикл выполняется до тех пор, пока <Условие> не вернет false. Если это не случится, 
цикл будет бесконечным. 


<Приращение> Может не только увеличивать значение переменной-счетчика, HO и 
уменьшать. Выведем все числа от 100 до 1: 


for (var i = 100; 1 > 0; 1--) document.write(i + "<br>"); 

<Приращение> может изменять значение переменной-счетчика не только на единицу. 
Выведем все четные числа от 1 до 100: 

for (var і = 2; і < 101; і += 2) document.write(i + "<br>"); 

Следует заметить, что выражение, указанное в параметре <Условие>, ВЫчисляется на 
каждой итерации. Рассмотрим вывод элементов массива: 


мас агг = | 1, 2, 3 ]; 
for (var i = 0; i < arr.length; i++) { 


if (i == 0) { 
агг.риѕһ (4); // Добавляем новые элементы 
arr.push (5); // для доказательства 
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аосчпепе.мкіже(агк(1|) + " "); 
} // Выведет: 12345 


В этом примере мы указываем свойство length в параметре <Условие>, а внутри 
цикла (чтобы доказать вычисление на каждой итерации) добавляем в массив новые 
элементы. В итоге мы получили все элементы массива, включая новые элементы. 
Чтобы этого избежать, следует вычисление размера массива указать в первом па- 
раметре: 


var arr = [1, 2, 3]; 
for (var i = 0, с = arr.length; 1 < с; i++) { 
if (i == 0) { 
arr.push (4); // Добавляем новые элементы 
5) 


) 


агг.риѕћ ( // для доказательства 


} 
аосотепі.мгіёе (ахх[1] + " "); 
} // Выведет: 1 2 3 


Все параметры цикла for являются необязательными. Хотя параметры можно не 
указывать, точки с запятой обязательно должны присутствовать. Если все парамет- 
ры не указаны, то цикл будет бесконечным. Чтобы выйти из бесконечного цикла, 
следует использовать оператор огеак: 


var і = 1; // <Начальное значение> 
Ро // Бесконечный цикл 
ЇЁ (1 <= 100) 1 // <Условие> 
document.write(i + "<br>"); 
і++; // <Приращение> 
} 
else { 
ргеак; // Выходим из цикла 


3.4.2. Цикл while 


Выполнение инструкций в цикле while продолжается до тех пор, пока логическое 
выражение истинно. Он имеет следующий формат: 


<Начальное значение>; 

while (<Условие>) { 
<Инструкции>; 
<Приращение>; 


} 
Последовательность работы цикла while: 
1. Переменной-счетчику присваивается начальное значение. 


2; Проверяется условие. Если оно истинно, выполняются инструкции внутри цик- 
ла, иначе выполнение цикла завершается. 
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3. Переменная-счетчик изменяется на величину, указанную в параметре <Прира- 
шение>. 


4. Переход кп. 2. 


Выведем все числа от 1 до 100, используя цикл while (листинг 3.16). 


Листинг 3.16. Цикл while 


var 1 = 1; 

while (i < 101) { 
document.write(i + "<br>"); 
i++; 


ВНИМАНИЕ! 
Если <прирашение> не указано, цикл будет бесконечным. 


3.4.3. Цикл do...while 


Инструкции в теле цикла ао. ..while выполняются до тех пор, пока логическое Bbl- 
ражение истинно. Но, в отличие от цикла while, условие проверяется не в начале 
цикла, а в конце. Поэтому инструкции внутри цикла ао...чһ11е выполнятся мини- 
мум один раз. 


Формат цикла до. ..while: 


<Начальное значение>; 
do { 
<Инструкции>; 
<Приращение>; 
} while (<Условие>); 


Последовательность работы цикла ао. ..while: 

1. Переменной-счетчику присваивается начальное значение. 

2. Выполняются инструкции внутри цикла. 

3. Переменная-счетчик изменяется на величину, указанную в <Прирашение>. 
4 


А Проверяется условие. Если оно истинно, происходит переход к п. 25 а если 
нет -- выполнение цикла завершается. 


Выведем все числа от 1 до 100, используя цикл ао. . .while (листинг 3.17). 


Листинг 3.17. Цикл do. . .while 


маг 1 = 1; 

ао { 
document.write(i + "<рг>"); 
і++; 


} while (i < 101); 
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ВНИМАНИЕ! 
Если <Прирашение> не указано, цикл будет бесконечным. 


3.4.4. Цикл for...in 


Цикл for...in используется для перебора перечислимых свойств объектов и клю- 
чей ассоциативных массивов. Он имеет следующий формат: 


for (<Переменная> іп <Объект>) { 
<Тело цикла> 


} 


Цикл for...in на каждой итерации присваивает параметру <Переменная> ИМЯ свой- 
ства объекта или ключа ассоциативного массива. С помощью ключа можно полу- 
чить значение соответствующего элемента ассоциативного массива (листинг 3.18). 


Листинг 3.18. Цикл Ғос...іп 


var arr = new Object(); 


агг ["Один"] = 1; 
arr["IBa"] = 2; 
агг("Три"і1 = 3; 


for (var key іп arr) ( 
// Переменной key на каждой итерации присваивается 
// ключ текущего элемента ассоциативного массива 
аӢосотепё.мгіёе (кеу + " =" + arr[key] + "<br>"); 


В итоге мы получим следующий результат: 


Один = 1 
Два = 2 
Три = 3 


Следует учитывать, что порядок обхода является произвольным, поэтому переби- 
рать обычные массивы, где порядок следования элементов важен, с помощью этого 
цикла не стоит. 


Пример перебора свойств объекта: 


var obj = ( а: 10, b: 20 }; 
for (var prop in obj) { 
document.write (prop + " "); 


}//ab 


3.4.5. Цикл for...of 


Цикл ғог...оғ используется для перебора объектов, поддерживающих итерации. 
Он имеет следующий формат: 
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for (<Переменная> of <Объект>) ( 
<Тело цикла> 


} 


Цикл for...of на каждой итерации присваивает параметру <Переменная> значение 
свойства объекта. Например, с помощью этого цикла можно перебирать элементы 
массива (листинг 3.19). 


Листинг 3.19. Цикл Ғос...оҒ 


маг arr = [1, 2, 3]; 

for (var i of arr) { 
document.write(i + " "); 

} 22,23 


ВНИМАНИЕ! 


Цикл for...of доступен только в самых последних версиях У/ер-браузеров. В браузе- 
ре Internet Explorer в настоящее время его поддержки нет. 


3.4.6. Оператор сопйпие. 
Переход на следуюшую итерацию цикла 
Оператор continue позволяет перейти на следующую итерацию цикла еше до за- 


вершения выполнения всех инструкций внутри цикла. Этот оператор можно при- 
менять в любых циклах. Его формат: 


continue [<Метка>]; 


Выведем все числа от 1 до 100, кроме чисел от 5 до 10 включительно (листинг 3.20). 


Листинг 3.20. Использование оператора continue 


о е 13 i < IOL АІ 4 
ТЕ (1 > 4 66 і < 11) continues; 
document.write(i + "<рг>"); 


3.4.7. Оператор break. Прерывание цикла 


Оператор Ыгеак Позволяет прервать выполнение цикла досрочно. Его формат: 
break [<Метка>]; 


Выведем все числа от 1 до 100 еще одним способом (листинг 3.21). 


Листинг 3.21. Прерывание цикла 


Бок (мак і = 1; ; 1++) { 
if (i > 100) break; 
document.write(i + "<br>"); 
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Здесь мы не указываем условие продолжения цикла, так что цикл продолжался бы 
бесконечно, если бы мы не вышли из него, используя оператор break. 


ВНИМАНИЕ! 


Оператор ргеак прерывает выполнение цикла, а не программы, т. е. далее будет Bbl- 
полнена инструкция, следуюшая сразу за циклом. 


3.5. Числа 

В языке JavaScript для хранения чисел предназначен тип данных number: 
console.log (typeof 1); // number 

console.log (typeof 2.0); // number 


Отдельного типа данных для целых чисел в языке JavaScript нет. Числа хранятся 
В формате вешественных чисел двойной точности. 


3.5.1. Указание значений 


Целочисленное значение задается в десятичной, двоичной, восьмеричной или 
шестнадцатеричной форме. Двоичные числа начинаются с комбинации символов Ob 
(или 0B) и могут содержать цифры 0 или 1. Восьмеричные числа начинаются с нуля 
и содержат цифры от 0 до 7. Если встречаются другие цифры, то значение интер- 
претируется как десятичное. Шестнадцатеричные числа начинаются с комбинации 
символов ох (или ох) и могут содержать цифры от 0 до 9 и буквы от A до г (регистр 
букв не имеет значения). Двоичные, восьмеричные и шестнадцатеричные значения 
преобразуются в десятичное значение: 


// Двоичное значение 
console.log (0501110111); // 119 
// Восьмеричное значени 


console.log (0167); // 119 
// Шестнадцатеричное значение 

console. log (0x77); // 119 
console.log (0xFF); 79 55 


// Десятичное значение 
сопзо1е.1оа (119); // 119 


Вещественное число может содержать точку и (или) экспоненту, начинающуюся 
с буквы Е (регистр не имеет значения): 


сопзо1е.1о9 (20.0); // 20 
сопво1е.104(12.1е20); // 1.21е+21 
сопѕо1е.109(.123); // 0.123 
console.log (47.Е-10); // 4.7е-9 


При выполнении операций над вещественными числами следует учитывать огра- 
ничения точности вычислений. Например, результат следующей инструкции может 
показаться странным: 


236 Гпава 3 


сопво1е.104(0.3 - 0.1 - 0.1 - 0.1); 
// -2.7755575615628914е-17 


Ожидаемым был бы результат 0.0, но, как видно из примера, мы получили совсем 
другой результат (-2.7755575615628914е-17). Он очень близок к нулю, но не равен 
нулю. Учитывайте это при указании вещественных чисел в качестве значения счет- 
чика внутри цикла. Попытка проверить такое значение на равенство может привес- 
ти к бесконечному циклу. 


В логическом контексте число 0 и значение Мам трактуются как false, тогда как 
любое другое число — как true: 


console.log( !!0 ); // false 
сопво1е.1о42( !!0.0 ); // false 
сопзо1е.1оа( !!МаМ ); // Еа1зе 
сопво1е.1о42( !!1 ); // true 
сопво1е.1о42( !!-1 ); // true 


Если выполнить приведение логических значений к ТИПУ number, ТО false будет 
приведено к 0, a true — K 1: 


console.log( false + 0 ); о 
сопво1е.104( true + 0); // 1 


3.5.2. Класс Number 


Класс Number является классом-оберткой над элементарным типом number. Экземп- 
ляр класса создается по следующей схеме: 


<Экземпляр класса> = new Мопрег(<Начальное значение>); 


Пример создания экземпляра класса: 


var x = new Number (10); 
console.log (x.toString ()); // 10 
console.log (typeof x); // object 


Таким способом редко пользуются. Все методы класса Number доступны и при ис- 
пользовании элементарного типа. Преобразование элементарного типа в объектный 
выполняется автоматически: 


var x = 255; 
console.log (x.toString(16)); // ff 
console.log (typeof х); // number 


Если в операции участвуют число и экземпляр класса Number, TO экземпляр класса 
будет автоматически преобразован в число: 


var x = new Мотрег (10); 
var у = 255; 
сопзо1е.1о4 (х + у); // 265 


Для преобразования значения в число можно использовать следующий формат: 


<Переменная> = Мипбег(<Значение>); 
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Пример преобразования строки в число: 


var х = Number ("10"); 
console.log (х); // 10 
console.log (typeof х); // number 


Свойства класса Number можно использовать без создания экземпляра класса: 


О МАХ VALUE 


максимально допустимое в JavaScript число: 


console. log (Мопрег.МАХ VALUE); // 1.7976931348623157е+308 


П MIN VALUE — минимально допустимое в JavaScript число: 


console.log (Number.MIN VALUE); // 5е-324 


O хам--значение мам: 


console.log (Number.NaN); // NaN 


С] NEGATIVE ІМЕІМІТҮ — значение «минус бесконечность»: 


console. log (Мопрег.МЕСАТІУЕ ТМЕТМТТУ); // -Infinity 


O POSITIVI ІМІТҮ--Ззначение «плюс бесконечность»: 


ка] 
н 
2 
tj 


console.log (Number.POSITIVE_INFINITY); // Infinity 


O EPSILON — значение «эпсилон»: 


console.log (Number.EPSILON); // 2.220446049250313е-16 


п ІМ ЗАЕЕ INTEGER — минимальное целочисленное значение: 


console. log (Мопрег.МІМ ЗАЕЕ ТМТЕСЕВ); // -9007199254740991 


п АХ SAFE INTEGER — максимальное целочисленное значение: 


console.log (Number.MAX SAFE INTEGER); // 9007199254740991 


ПРИМЕЧАНИЕ 


Свойства EPSILON, МТМ SAFE INTEGER И МАХ SAFE INTEGER недоступны в браузере Internet 
Explorer и доступны только в последних версиях прочих У/ер-браузеров. 


Методы: 
O valueof() — возврашает числовое значение экземпляра класса: 
var x = new Number (15); 
var у = x.valueOf(); // 15 
console.log (typeof у); // number 
п toString ( [<Основание>]) — возвращает строковое представление числа: 
var x = 15; 
var str = х.Жо5бігіпа(); у Т5" 
console.log (typeof str); // string 
x = 100; 
console.log (x.toString(2)); // 1100100 


х = 119; 
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console.log (x.toString(8)); // 167 
х - 255; 
console.log (x.toString(16)); // ff 


O +оғіхеа ( [<Число>]) — возвращает строковое представление числа, округленное 
до указанного числа цифр после точки. Если параметр не указан, то значение 
округляется до целого числа: 


уаг х = 1234.6789; 


console.log (x.toFixed()); // 1235 
console.log (x.toFixed(1)); 222343 
console.log (x.toFixed(2)); // 1234.68 
С <оРгесізіоп(І<Число>1) — возвращает строковое представление числа, округ- 


ленное до указанного числа значаших цифр. Если параметр не указан, то метод 
аналогичен методу toString (): 


var x = 0.06789; 


console.log (x.toPrecision()); // 0.06789 
console.log (x.toPrecision(1)); // 0.07 
console.log (x.toPrecision(2)); // 0.068 
o toExponential ( [<Число>]) — возврашает строковое представление числа B экс- 


поненциальной форме, округленное до указанного числа цифр после точки. 
Если параметр не указан, то округление не выполняется: 


var x = 0.06789; 


console.log (х.коЕхропепЕ1а1 ()); // 6.789е-2 
console.log (х.+іоЕхропепёіа1 (1)); // 6.8е-2 
console.log (х.коЕхропепЕ1а1 (2)); // 6.79е-2 
o toLocaleString() — возврашает строковое представление числа в зависимости 
от локали (см. разд. 3.5.8): 
var x = 1027324.564 
console. log (x.toLocaleString ("ка-ВО")); // 1 027 324,564 
console. log (x.toLocaleString ("еп-05")); // 1,027, 324.564 
console. log (x.toLocaleString ("de-DE")); // 1.027.324,564 


В последних версиях некоторых Web-6pay3epoB доступны также следующие CTATH- 
ческие методы класса Number: 


П 15 Іпседек(<Значение>) -- возвращает значение true, если указанное значение 
является целым числом: 


console. log (Number.isInteger(10)); // true 
console.log (Number.isInteger(10.2)); // false 


o isSafeInteger (<Значение>) — возвращает значение true, если указанное значе- 
ние является «безопасным» целым числом: 
console.log (Number.isSafeInteger (10)); // true 


console.log (Number.isSafeInteger ( 
Number.MAX SAFE INTEGER + 1)); // false 
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П рагзеїІпі (<Строка>[, 


<Основание>]) — преобразует строку в целое число (аналог 
глобальной функции parseInt ()). Строка считается заданной в системе счисле- 
ния, указанной вторым необязательным параметром. Если основание не указано, 
то система счисления выбирается автоматически и зависит от префиксов в стро- 
ке, — например, если строка начинается с "Ох", то будет использоваться основа- 
ние 16. Если строка не может быть преобразована в число, возвращается значе- 


ние Мам: 
сопво1е.1о4( Number.parseInt ("10") ); // 10 
сопзо1е.1оа ( Number.parseInt ("ОхЕЕ") ); // 255 
console.log( Number.parseInt ("ОхЕЕ", 16) ); 71/255 
сопво1е.1о4( Number.parseInt("0167", 8) ); ИА A19 
console.log( Number.parseInt("1110111", 2) ); // 119 
console.log( Number.parseInt ("строка", 2) ); // Мам 
П parseFloat (<Строка>) — преобразует строку в число с плавающей точкой (ана- 
лог глобальной функции parseFloat ()): 
сопво1е.1о4( Number.parseFloat ("5.2") ); 552 
сопво1е.1о4( Number.parseFloat ("5е-2") ); // 0.05 
сопзо1е.109 ( Number.parseFloat ("строка") ); // Мам 


O ісгіпіс 


(<Значение>) 


возвращает true, если значение не равно плюс или 


минус бесконечность или значению NaN, и false — в противном случае (аналог 
глобальной функции ізҒіліғе()); 


С ізмам(<Значение>) -- возвращает true, если значение равно мам, и false — B про- 
тивном случае (аналог глобальной функции іѕмам ()): 


var х = 
consol 
consol 
consol 
consol 


console. 
CONSOLES і 


сопзо:е. 1 


5; 


10.0 / 0, у= 0.0 / 0, х = 
Негр ле Уе лро е 
Log ( Number.isNaN (х) ); 

Log ( Number.isNaN (у) ); 

Log ( Number.isNaN (z) ); 

109 ( Number.isFinite(x) ); 
Log ( Number.isFinite(y) ); 
Log ( Number.isFinite(z) ); 


// 
// 
// 
// 


// 
// 
// 


Infinity NaN 5 


3.5.3. Математические константы 


В классе Math определены следующие стандартные константы: 


O РІ — содержит число л: 


console.log ( 
O E— соде 
console.log ( 


О 1м2 — на 


соп5оте. 


Тод ( 


а 


а 


а 


ti 


спа. 


Еһ.РІ); 


); 


th.LN2); 


// 3.141592653589793 


ржит значение константы е (основание натурального логарифма): 


// 2.718281828459045 


туральный логарифм из 2: 


// 0.6931471805599453 
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С ім10-- натуральный логарифм из 10: 

console.log (Math.1N10); // 2.302585092994046 
С LoG2E — логарифм по основанию 2 от е: 

console.log (Math.LOG2E); // 1.4426950408889634 
С LOG10E — десятичный логарифм от e: 

console.log (МаЕһ.10610Е); // 0.4342944819032518 


С зовт1 2-- квадратный корень из 0.5: 
console.log (Math.SQRT1_2); // 0.7071067811865476 


С зовт2 — квадратный корень из 2: 


console.log (Ма В .5ОВТ2); // 1.4142135623730951 


3.5.4. Основные методы для работы с числами 


В классе Math определены следующие основные методы для работы с числами: 
О abs (<Значение>) — абсолютное значение: 
console.log (Math.abs (-5)); ТРЕ) 
П ехр(<Значение>) — экспонента; 
С 109 (<Значение>) — натуральный логарифм; 
П ром (<Число>, <Степень>) — возведение <Числа> В <Степень>: 


маг х = 5; 


console.log (Math.pow(x, 2)); // 25 (5 в квадрате) 

О sqrt (<Значение>) — квадратный корень: 
var x = 25; 
console.log (Math.sqrt (х)); // 5 (квадратный корень из 25) 

П пах(<Список чисел через запятую>) -- максимальное значение из списка: 
console.log (Math.max(3, 10, 6)); // 10 

О піп(<Список чисел через запятую>) — минимальное значение из списка: 
console.log (Math.min(3, 10, 6)); // 3 


3.5.5. Округление чисел 


Для округления чисел предназначены следующие методы из класса Math: 


O ceil () — возвращает значение, округленное до ближайшего большего целого: 
сопво1е.1о4( Math.ceil(1.49) ); И 
сопво1е.1о4( Маёһ.сеїі1 (1.50) ); 52 


сопво1е.1о4( Math.ceil(1.51) ); //? 
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О floor() — возвращает значение, округленное до ближайшего меньшего целого: 


сопво1е.1о4( Math.floor(1.49) ); //1 
сопво1е.1о4( Math.floor(1.50) ); // 1 
console.log( Math.floor(1.51) ); ДУ: 1 


О round() — возвращает число, округленное до ближайшего меньшего целого для 
чисел с дробной частью, меньшей 0.5, или значение, округленное до ближайше- 
го большего целого для чисел с дробной частью, большей или равной 0.5: 


сопво1е.1о4( Math.round(1.49) ); 72 
сопво1е.1о4( Math.round(1.50) ); ТА А?) 
сопво1е.1о4( Math.round(1.51) ); //? 

П trunc() — отбрасывает дробную часть и возвращает целое число (метод досту- 
пен только в последних версиях некоторых У/ерв-браузеров): 
сопзо1е.1оа( Math.trunc(1.5) ); Ж.А 
сопво1е.1о4( Math.trunc(-1.5) ); // -—1 
сопво1е.1о4( Math.ceil(1.5) ); // 2 
сопво1е.1о4( Math.ceil(-1.5) ); ен, 
сопво1е.1о4( Math.floor(1.5) ); // 1 
сопво1е.1о4( Math.floor(-1.5) ); // -2 


3.5.6. Тригонометрические функции 


В классе Math определены следующие основные тригонометрические функции: 


П сіп, соз(), tan() — стандартные тригонометрические функции (синус, KOCH- 
нус, тангенс). Значение указывается в радианах: 


var п = Math.PI / 180; 


сопво1е.1о4( Math.sin(90 * п) ); // 1 
сопѕо1е.109( Маїћ.соѕ (10 * п) ); // 0.984807753012208 
сопѕо1іе.109( Math.tan(45 * п) ); // 0.9999999999999999 
П асіп(), асов(), ағап() — обратные тригонометрические функции (арксинус, apk- 


косинус, арктангенс). Значение возвращается в радианах. 


3.5.7. Преобразование строки в число 


Числа, вводимые пользователем, например, в поле диалогового окна, представлены 
в виде строки. Чтобы в дальнейшем использовать эти числа, необходимо выпол- 
нить преобразование строки в число. Для этого предназначены следующие функ- 
ЦИИ: 

С parseInt (<Строка>[, <Основание>1) — преобразует строку в целое число. Строка 
считается заданной в системе счисления, указанной вторым необязательным па- 
раметром. Если основание не указано, то система счисления выбирается автома- 
тически и зависит от префиксов в строке, — например, если строка начинается 
с "0х", то будет использоваться основание 16. Если строка не может быть преоб- 
разована в число, возвращается значение NaN: 
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сопво1е.1о4( ракзеіпе("10") ); // 10 

console.log( рагѕеїІпі ("ОхЕЕ") ); // 255 
сопво1е.104( parseInt ("ОхЕЕ", 16) ); // 255 
сопѕо1е.109( parseInt ("0167", 8) ); // 119 
сопво1е.1о4( parseInt ("1110111", 2) ); // 119 
console.log( parseInt ("строка", 2) ); // NaN 

П parseFloat (<Строка>) — преобразует строку в число с плавающей точкой: 

console.log( parseFloat ("5.2") ); // 5.2 

console.log( parseFloat ("5е-2") ); // 0.05 
сопзо1е.109( parseFloat ("строка") ); // Мам 


В последних версиях некоторых \/еБ-браузеров доступны также статические METO- 
ДЫ parseInt () И parseFloat () из класса Number (см. разд. 3.5.2): 


сопзо1е.1оа ( Number.parseInt ("ОхЕЕ") ); // 255 
сопво1е.1о4( Number.parseFloat ("5.2") ); 7752 


3.5.8. Преобразование числа в строку 

Чтобы преобразовать число в строку, достаточно выполнить операцию конкатена- 
ЦИИ: 

сопво1е.104а( 10 +" " + 1.2); // 10 1.2 

Для преобразования числа в строку можно также воспользоваться методом 
toString ( [<Основание>]): 


var х = 10, у = 5.2; 


сопво1е.1о4( x.toString() ); // 10 
сопво1е.1о4( x.toString(8) ); Ж» 12 
сопво1е.1о4( y.toString() ); 115,2 


Метод toLocaleString ([<Локаль>[, <Настройки>11) возвращает строковое представ- 
ление числа в зависимости от локали. В первом параметре можно задать название 
локали: 


var x = 1027324.5647 


console.log (x.toLocaleString ("ru-RU")); // 1 027 324,565 
console.log (x.toLocaleString ("еп-05")); // 1,027, 324.565 
console.log (x.toLocaleString ("de-DE")); // 1.027.324, 565 


Во втором параметре указывается объект с дополнительными настройками: 


С style — стиль форматирования: "decimal" (просто число, значение по умолча- 
НИЮ), "currency" (валюта) или "percent" (проценты); 


П currency — задает код валюты для стиля "currency"; 


П currencyDisplay — задает способ отображения валюты для стиля "currency": 
"symbol" (символ валюты, значение по умолчанию), "code" (код валюты, напри- 
мер "вов") или "name" (название валюты, например "евро"): 
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var x = 1027324.5647 
сопво1е.104( x.toLocaleString ("ru-RU", 
{ style: "currency", currency: "RUB", 
currencyDisplay: "code"})); // 1 027 324,56 RUB 


С minimumIntegerDigits — минимальное количество цифр в целой части числа 
(значение по умолчанию: 1); 


O minimmFractionDigits — минимальное количество цифр в дробной части числа 
(значение по умолчанию: 0); 


O maximmFractionDigits — максимальное количество цифр в дробной части числа: 


var x = 1027324.5647; 
сопво1е.104( x.toLocaleString ("ru-RU", 
{ style: "decimal", minimumIntegerDigits: 1, 
minimumFractionDigits: 0, 
maximumFractionDigits: 2 })); // 1 027 324,56 


O useGrouping — определяет, нужно ли выводить разделители тысячных групп. 
Можно указать значения true (разделители выводятся, значение по умолчанию) 
ИЛИ false (разделители не выводятся): 


мас х = 1027324.5647; 
сопво1е.104( x.toLocaleString ("ru-RU", 
{ style: "decimal", useGrouping: false, 
maximumFractionDigits: 2 })); // 1027324,56 


Вместо метода toLocaleString () можно воспользоваться классом Intl .NumberFormat: 


<Экземпляр класса> = new Intl.NumberFormat ( [<Локаль>[, <Настройки>11); 


Применить настройки и получить отформатированную строку позволяет метод 
format (<Число>): 


var x = 1027324.5647; 
маг ор) = new Intl.NumberFormat ("ru-RU"); 
console.log (obj .Еогта® (х)); // 1 027 324,565 
obj = new Intl.NumberFormat ("ка-ВИ", 
{ style: "decimal", useGrouping: false, 
maximumFractionDigits: 2 }); 
console.log (ору. ҒЁогтаї (х)); // 1027324,56 


Метод resolvedOptions () возвращает объект со всеми настройками: 


var ор) = new Intl.NumberFormat ("ru-RU"); 
console.log (obj . геѕо1уеаорёіопѕ ()); 

// Object { locale: "ru-RU", numberingSystem: "latn", 

// style: "decimal", minimumIntegerDigits: 1, minimumFractionDigits: 0, 
// maximumFractionDigits: 3, useGrouping: true } 


В последних версиях некоторых Web-6pay3epoB доступны также методы toFixed (), 
ЕОРгесізіоп() И toExponential() из класса Number (см. разд. 3.5.2): 
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var x = 0.06789; 


console.log (x.toFixed(2)); // 0.07 
console.log (х.боРгесіѕіоп(2)); // 0.068 
console.log (x.toExponential(2)); // 6.79е-2 


3.5.9. Генерация псевдослучайных чисел 


Для генерации псевдослучайных чисел предназначен метод гапаощ() из класса Math. 
Он возврашает псевдослучайное число OT 0 до 1: 


console.log (Ма В. гапаот()); // например, 0.6748229072896632 


Для того чтобы получить случайное целое число от 0 до 9, нужно возвращаемое 
методом гапаот() значение умножить на 9.9999, а затем округлить число до бли- 
жайшего меньшего целого при помощи метода floor (): 


console.log (Math.floor (Math.random() * 9.9999)); // например, 2 


Попробуйте несколько раз обновить У/ер-страницу. Число будет меняться случай- 
ным образом в пределах от 0 до 9 включительно. Для чего это может пригодиться? 
Например, если есть четыре баннера 468х60, то их можно показывать случайным 
способом: 


var х = Math.floor (Ма В. гапаот() * 3.9999); 
document.write ('<img src="banner' + x + 
'.gif" width="480" height="60" alt="">!'); 


Файлы четырех баннеров с именами bannero.gif, banner1.gif, banner2.gif и banner3.gif 
должны быть расположены в одной папке с файлом, в котором находится испол- 
няемый скрипт. 
Названия файлов с баннерами можно сделать произвольными, добавив их в массив: 
var arr = | "раппег-геа.а1Е", "banner-blue.jpeg", 

"banner-gray.gif", "banner-white.png" 1; 
var x = Math.floor (Math.random() * 3.9999); 


document.write ('<img src="banner' + arr[x] + 
'.gif" width="480" height="60" alt="">!'); 


3.5.10. Бесконечность и значение NaN 


Деление числа на 0 приведет к значению плюс или минус Infinity (бесконечность), 
а деление числа 0.0 на о — к значению мам (нет числа): 


console.log( 10/0); // Infinity 
console.log( -10 / 0); // -Infinity 
console.log ( OAO // NaN 


Присвоить эти значения можно также с помощью глобальных свойств Infinity И 
NaN или свойств РОЗТТТУЕ_ ІМЕІМІТҮ, NEGATIVE INFINITY И NaN из класса Number: 


T 


console.log( Infinity ); // Infinity 
console.log( -Infinity ); // -ІпЕіпіку 
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console.log( NaN ); // NaN 
console.log (Number.POSITIVE_INFINITY); // Infinity 
console.log (Number .NEGATIVE_ INFINITY); // -Infinity 
console.log (Мотрег.Маћ); // NaN 


Любая операция значения Infinity C числом даст в результате Infinity: 
console.log( Infinity - 5 ); // Infinity 

Любая операция со значением Мам даст в результате Мам: 

сопво1е.1о4( NaN + 5); // Мам 

При сравнении значение мам не равно даже самому себе: 


console.log( NaN == NaN ); // false 
console.log( NaN === NaN ); // false 


Для проверки соответствия этим значениям следует воспользоваться следуюшими 
глобальными функциями: 


O іѕғіпібе (<Значение>) возвращает true, если значение не равно плюс или 
минус бесконечность или значению NaN, И false — в противном случае; 


С ізмам(<Значение>) -- возвращает true, если значение равно мам, и false — в про- 
тивном случае: 


уап х = 10,0-/ 0; у-- 00-70, 2--5; 

console.log( x+" "+y+"" +z ); // Infinity Мам 5 
console.log( isNaN (x) ); // false 
console.log( isNaN(y) ); // true 
console.log( isNaN(z) ); // false 
console.log( isFinite (x) ); // false 
console.log( isFinite(y) ); // false 
console.log( isFinite(z) ); // true 


В последних версиях некоторых Web-6pay3epoB доступны также статические METO- 
ДЫ isFinite() И isNaN() из класса Number (см. разд. 3.5.2): 


хаг х = 10.0 / 0, у= 0.0 / 0, 2 = 5; 


сопво1е.1о4( Number.isNaN (у) ); // true 
console.log( Number.isFinite(x) ); // false 
console.log( Number.isFinite(z) ); // true 


3.6. Массивы и множества 


Массив — это нумерованный набор переменных. Переменная в массиве называется 
элементом массива, а ее позиция в массиве задается индексом. Нумерация элемен- 
тов массива начинается с 0, а нес 1. Это следует помнить. Общее количество эле- 
ментов в массиве называется размером массива. Массивы, ключами которых явля- 
ются числа, часто называют сиисками, а массивы, ключами которых являются 
строки, — ассоциативными массивами. 
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3.6.1. Инициализация массива 


Массив инициализируют следующими способами: 


п переменные указываются через запятую в квадратных скобках: 


var arr = [1, 2, 3, 4]; 
console.log( arr ); // Array L 1, 2, 3, 4 1 
сопво1е.104( typeof arr ); // object 


O с помощью класса Array. Класс предоставляет доступ к множеству методов для 
обработки массивов. Экземпляр класса можно создать следующими способами: 


<Экземпляр класса> = new Array (<Количество элементов массива>); 
<Экземпляр класса> = пем Агтау( 
[<Элементы массива через запятую>]); 


Если в круглых скобках нет никаких параметров. то создается массив нулевой 
длины, т. е. массив, не содержащий элементов: 


var arr = new Аггау(); 
console.log( arr ); // Array [ |] 
сопво1е.104( typeof arr ); // object 


Если указано одно число, то это число задает количество элементов массива: 


var arr = new Array (3); 
console.log( arr ); // Array [ <3 пустых элемента> ] 


Если указано несколько элементов через запятую, или единственное значение не 
является числом, то указанные значения записываются в создаваемый массив: 


var arr = new Аггау(1, 2, 3, 4); 
console.log( arr ); // Array [ 1, 2, 3, 4 1 


О с помощью статического метода оѓ (<Список значений>) ИЗ класса Array. Метод 
доступен только в последних версиях некоторых \еБ-браузеров: 


var arr = Аггау.оЕ(1, 2, 3, 4); 
сопзо1е.1од (арг); // Array [ 1, 2, 3, 4 1 


Создать массив на основе другого объекта, поддерживающего итерации, можно 
с помощью статического метода from() из класса Array: 


Аггау. Егом (<Объект>[, <Функция>[, <this>]]) 


В первом параметре указывается объект, элементы которого будут преобразованы 
в массив. Во втором параметре можно указать функцию, которая будет вызвана для 
каждого элемента. Объект, указанный в третьем параметре, будет доступен внутри 
функции через указатель this: 


console.log (Array.from( "123" )); // Array [ "1", "2", "3" ] 
сопво1е.1о4(Ахгау.ҰҒгот( [1, 2, 3 |, function(n) { 

return n * 2; 
к» // Array [2, 4, 6 1 
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Обратите внимание: этот метод доступен только в последних версиях некоторых 
\еБ-браузеров. 


Проверить, является ли объект массивом, позволяет статический метод isArray () 
из класса Аггау. Метод возвращает значение true, если объект является массивом, 
И false — в противном случае: 


console.log (Аггау.15Аггау( [1, 2] )); // true 
console.log (Array.isArray( {} )); // false 


3.6.2. Получение и изменение элемента массива 


Получить значение элемента массива можно, указав его индекс в квадратных скоб- 
ках. Нумерация элементов массива начинается с нуля, а не с единицы: 


уаг агг = [1, 2, 31; 

сопво1е.1о4( акк(01 ); ОАТ 
сопво1е.1о4( аке (11); // 2 
console.log( arr[2] ); // 3 


Если элемент с указанным индексом не существует. то будет возвращено значение 
undefined: 


console.log( arr[4] ); // undefined 


При желании можно добавить новый элемент массива или изменить значение 
сушествуюшего: 


маг arr = (1, 21; 
arr[2] = 3; // Добавление нового элемента 
ағт|01---55; // Изменение значения существующего элемента 


console.log( arr ); // Array | 55, 2, 31 


Если при добавлении указать индекс, превышающий количество элементов масси- 
ва, то будет создан элемент с указанным индексом, а также промежуточные эле- 
менты со значением undefined: 


var arr = [1, 2]; 
arr[5] = 3; // Добавление нового элемента 
console.log( arr ); // Array [ 1, 2, <3 пустых элемента>, 3 1 


В последних версиях некоторых \!еБ-браузеров существует метод ғ111(), с по- 
мощью которого можно заполнить весь массив или только диапазон одинаковым 
значением. Формат метода: 


Е111(<Значение>[, <Начало>[, <Конец>]]) 


В первом параметре указывается вставляемое значение. Если остальные параметры 
не заданы, то это значение заполнит весь массив. В параметре <Начало> можно ука- 
зать начальный индекс диапазона (значение по умолчанию: 0), а в параметре 
<Конец> — конечный индекс (значение по умолчанию: число элементов массива): 


var arr = new Аггау (5); 
агг. Е111 (1); 
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сопво1е.1оа(акк); // Array [ 1, 1, 1, 1, 1 1 


аи: ЕТ: (2; 2, 40); 
сопѕо1е.1од (арр); // Array [ 1, 2, 2, 2, 11 


3.6.3. Определение числа элементов массива 


Получить число элементов массива позволяет свойство length: 


var arr = | "Один", "Два", "Три" |; 
console.log (arr.length); // 3 


3.6.4. Многомерные массивы 


Многомерные массивы можно создать перечислением: 


var arr = new Array (new Аггау ("Один", "Два", "Три"), 

new Array ("Четыре", "Пять", "Шесть")); 
console.log (arr[0][1]); // Два 
var arr2 = | 


[ "Один", "Два", "Три" 7 


[ "Четыре", "Пять", "Шесть" ] 
1; 
console.log (акг2 [1] [1]); // Пять 


или поэлементно: 


var arr = new Аггау(); 


arr[0] = new Array(); 
arr[1] = new Array(); 
arr[0] [0] = "Один"; 
arr[0] [1] = "Два"; 
arr[0] [2] = "Три" 
arr[1] [0] = "Четыре"; 
arr[1] [1] = "Пять"; 
arr[1] [2] = "Шесть"; 
console.log (акк [1] [2]); // Шесть 
var arr2 = []; 

arr2[0] = []; 

arr2[1] = []; 

arr2[0] [0] = "Один"; 
агх2 [0] [1] = "Два"; 
агт2 [0] [2] = "Три"; 
агт2 [1] [0] = "Четыре"; 
arr2[1] [1] "Пять"; 
агу2 [1] [2] = "Шесть"; 


console.log (акк? [0] [0]); // Один 


Обращение к элементу многомерного массива осуществляется с помощью двух ин- 
дексов: 


console.log (arr[1] [2]); // Шесть 
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Любому элементу массива можно присвоить другой массив, что позволяет созда- 
вать так называемые «зубчатые» многомерные массивы: 


маг arr = [1, 2, 3]; 
аүг[1] = [2, 3]; 
arr[2] = (4, 5, 6]; 


for (var i = 0; i < arr.length; i++) { 
console.log (arr[i]); 
} 


Результат: 


3.6.5. Создание копии массива 


Следует учитывать, что операция присваивания сохраняет в переменной ссылку 
на массив, ане все его значения. Например, если попробовать сделать так, то изме- 
нение arr2 затронет агг1: 


var arrl, агг2; 
агг1 = |1, 2, 3, 4]; 


агг2 = аггі; // Присваивается ссылка на массив!!! 
агү2(01| = 88; 

сопзо1е. 104 (агг1); // Аггау [ 88, 2, 3, 4 1 

console.log (агг2); // Аггау [ 88, 2, 3, 4 1 


Чтобы сделать копию массива, можно, например, воспользоваться методом 511се (), 
который возвращает срез массива: 


var arrl, агг2; 

агг1 = (|1, 2, 3, 41; 

arr2 = arrl.slice(0); 

arr2[0] = 88; 

console.log (агг1); // Array [ 1, 2, 3, 41 
console.log (агг2); // Array [ 88, 2, 3, 4 1 


Необходимо заметить, что при использовании многомерных массивов метод 
ѕ1ісе () создает «поверхностную» копию, а не полную: 


var arrl, агг2; 

Arri = [ 10; 1,2-3,4 
arr2 = arrl.slice(0); 
arr2[0] [0] = 55; 

arr2[1] = 88; 


console.log (arr1[0]); // Array [ 55, 11 
console.log (arr2[0]); // Array [ 55, 11 
console.log (агх1[1]); // 2 
console.log(arr2[1]); // 88 
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Как видно из примера, изменение вложенного массива в агг2 привело к одновре- 
менному изменению значения В агг1. Иными словами, оба массива содержат ссыл- 
ку на один и тот же вложенный массив. 


В последних версиях некоторых \!еБ-браузеров для создания «поверхностной» KO- 
пии массива можно воспользоваться статическим методом from() из класса Array: 


var 


аггі = [1, 2, 3, 4], агг2; 


arr2 = Array.from(arr1); 
arr2[0] = 88; 
console.log (агг1); // Array [ 1, 2, 3, 4 ] 


console.log (агг2); // Array [ 88, 2, 3, 4 1 


3.6.6. Слияние массивов 


Метод сопса+ (<Список элементов или массивов>) возвращает массив, полученный 
в результате обьединения текушего массива и списка элементов или других масси- 
ВОВ. При ЭТОМВ текуший массив элементы не добавляются: 


мас arr = |1, 2], агү2 = (3, 4], arr3 = ПІ; 

arr3 = arr.concat (агг2); 

console.log (arr3); // Array [ 1, 2, 3, 41 
arr3 = агг.сопсаї (arr2, 5, 6); 


console.log (arr3); // Аггау [ 1, 2, 3, 4, 5, 6 1 


3.6.7. Перебор элементов массива 


Для перебора массивов лучше всего подходит цикл for. Умножим все элементы 
массива на 2: 


уаг 
Ғог 


} 


акг(1| *= 2 


arr = [1, 2, 3, 4]; 


(var 1 = 0; 1 < arr.length; i++) { 


, 
, 


сопзѕо1е.1од (агг); // Array | 2, 4, 6, 8 1 


В последних версиях \!еБ-браузеров можно Также воспользоваться методом 


for] 


for] 


Each (). Формат метода: 


Басһ (<Функция>[, <this>]) 


В первом параметре указывается ссылка на функцию, которая будет вызвана для 
каждого элемента массива, не имеющего значение undefined. Функция принимает 
три параметра: через первый параметр доступно значение текущего элемента, через 
второй — его индекс, а через третий — ссылка на массив. Значение, указанное 
в параметре <+һіз>, будет доступно через указатель this внутри функции. 


Прибавим ко всем элементам значение 2: 


var 
агг 


ата |1,2, Зу А] 
.forEach (function (value, index, аг) { 
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аг[іпдех] = value + 2; 


Юю; 
сопѕо1Іе.1од (агг); // Array [ 3, 4, 5, 6 1 


Перебрать элементы массива в последних версиях \№МеБ-браузеров позволяет также 
ЦИКЛ Ғок...оҒ. Он имеет следующий формат: 


for (<Переменная> of <Массив>) { 
<Тело цикла> 
} 


Цикл Ғог...оғ на каждой итерации присваивает параметру <Переменная> КОПИЮ зна- 
чения элемента массива. Посчитаем сумму всех элементов массива: 


var arr = |1, 2, 3], п = 0; 
for (var i of arr) 1 
n = 


} 
console.log (п); // 6 


3.6.8. Добавление и удаление элементов массива 


Добавить новый элемент массива или изменить значение сушествуюшего можно 
с помошью квадратных скобок: 


var arr = |1, 2, 3]; 

arr[3] = 4; 

arr[arr.length] = 5; // Добавление в конец массива 
console.log (агг); // Array [ 1, 2, 3, 4, 5 | 


Если при добавлении указать индекс, превышаюший количество элементов масси- 
Ва, то будет создан элемент с указанным индексом, а также промежуточные эле- 
менты со значением undefined: 


маг arr = [1, 2]; 
arr[5] = 3; // Добавление нового элемента 
console.log( arr ); // Array [ 1, 2, <3 пустых элемента», 3 1 


Для добавления и удаления элементов можно воспользоваться следующими мето- 
дами: 


п равһ(<Список элементов>) — добавляет в массив элементы, указанные в списке 
элементов. Элементы добавляются в конец массива. Метод возвращает новую 
длину массива: 


маг arr = [1, 2, 3]; 
console.log (arr.push(4, 5)); 175 
console.log (агг); // Array [ 1, 2, 3, 4, 5 | 


Для добавления элементов из какого-либо массива в конец текушего массива 
можно воспользоваться следующим кодом: 


var arr = |1, 2, 3], arr2 = [4, 5]; 


Array.prototype.push.apply (arr, агг2); 
console.log (агг); // Array [ 1, 2, 3, 4, 5 | 
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С чпвһіҒғЕ(<Список элементов>) — добавляет в массив элементы, указанные в спи- 
ске элементов. Элементы добавляются в начало массива. Метод возвращает но- 
вую длину массива: 


мас arr = [1, 2, 31; 
console.log (arr.unshift(4, 5)); // 5 
console.log (агг); // Атгау І 4, 5, 1, 2, 3 ] 
o shift () — удаляет первый элемент массива и возврашает его (или значение 
undefined, если элементов больше нет): 
var arr = [1, 2, 31; 
сопзо1е.1од (агг. ѕһійіё ()); ZIA 
console.log (агг); // Array [ 2, 3 1 
С рор() -- удаляет последний элемент массива и возвращает его (или значение 
undefined, если элементов больше нет): 
мас arr = |1, 2, 31; 
сопво1е.1оа(акк.рор()); ЪЗ 
console.log (агг); // Array [ 1, 2 ] 
п splice (<Начало>, <Количество>|, <Список значений>]) — Позволяет удалить, за- 


менить или вставить элементы массива. Возвращает массив, СОСТОЯЩИЙ из уда- 
ленных элементов: 


мас arri = [ 1, 2, 3, 4, 5 ]; 

var arr2 = агг1.ѕр1ісе (2, 2); 

console.log (агг1); // Array 1,220 2521 
console.log (агг2); // Array 3,41 

yar arrg = агг1.ѕр1ісе (1, 1, 7, 8, 9); 

console.log (агг1); // Array 12 1, ВА 19, 715571 
console.log (arr3); // Array 21 

var arr4 = arrl.splice(1, 0, 2, 3, 4); 

console.log (агг1); Актау [1 2; Зи 7) 829-521 
console.log (агг4); // Array ] 


3.6.9. Переворачивание массива 


Метод геуегѕе () переворачивает массив — его элементы будут следовать в обрат- 
ном порядке относительно исходного массива: 


var аке = I2 3 
агг.геуегѕе (); 
console.log (агг); // Атгау [ 3, 2, 11 


3.6.10. Сортировка массива 


Отсортировать массив позволяет метод sort ( [Функция сортировки]). Если функция 
сортировки не указана, будет выполнена обычная сортировка (числа сортируются 
по возрастанию, а символы — по алфавиту): 
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маг arr = | "Один", "Два", "Три" |; 
агг.ѕогі (); 
сопзо1е.1од (агг); // Array [ "Два", "Один", "Три" 1 


Если нужно изменить стандартный порядок сортировки, это можно сделать с по- 
мощью пользовательской функции сортировки. Функция принимает две перемен- 
ные и должна возвращать: 


П положительное число — если первый элемент больше второго; 
П отрицательное число — если второй элемент больше первого; 
С о — если элементы равны. 


Например, стандартная сортировка зависит от регистра символов: 


var агг = | "единица1", "Единый", "Единица2" 1; 
агг.ѕогї (); 
сопзо1е.1од (агг); // Array | "Единица2", "Единый", "единица1" ] 


В результате мы получим неправильную сортировку, ведь "Единица2" И "Единый" 
должны стоять позже "единица1". Изменим стандартную сортировку на свою сор- 
тировку без учета регистра (листинг 3.22). 


Листинг 3.22. Сортировка без учета регистра 


function стр (strl, str2) 1 // Сортировка без учета регистра 
strl = ѕіг1.боІомегСаѕе (); // Преобразуем к нижнему регистру 
56:2 = str2.toLowerCase(); // Преобразуем к нижнему регистру 


if (strl > str2) return 1; 
1Е (бегі < зегү2) retúrn -1; 


return 0; 
} 
var arr = | "единица1", "Единый", "Единица?" 1; 
arr.sort (cmp); // Имя функции указывается без скобок 
сопзо1е.1о4 (агг); // Array [ "единица1", "Единица2", "Единый" | 


Для этого две переменные приводим к одному регистру, а затем производим стан- 
дартное сравнение. Обратите внимание, что мы не изменяем регистр самих элемен- 
тов массива, т. к. работаем с ИХ КОПИЯМИ. 


Порядок сортировки можно изменить на противоположный (листинг 3.23), изменив 
возвращаемые функцией значения. В качестве примера укажем анонимную функ- 
цию вместо обычной. 


Листинг 3.23. Сортировка без учета регистра в обратном порядке 


Единый", 


var arr = (| "единица1", Единица?" 1; 


arr.sort (function (strl, 36:2) { 
strli = str1l.toLowerCase(); 
str2 = str2.toLowerCase(); 
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1Ғ (зегі > 6:2) геіџгп -1; 
if (strl < 56:2) return 1; 
return 0; 
Юю; 
сопзо1е.1о4 (арг); // Array [ "Единый", 


Единица2", "единица1" 1 


3.6.11. Получение части массива 


Метод slice (<Начало>[, <Конец>]) возвращает срез массива, начиная от индекса 
<Начало> И заканчивая индексом <Конец>, НО не включает элемент с этим индексом. 
Если второй параметр не указан, то возвращаются все элементы до конца массива: 
маг arri = | 1; 2, 3, 4,5] 

var агү2 = агк1.511ісе(1, 4); 

console.log (агг2); // Array [ 2, 3, 4 1 

var arr3 = агг1.ѕ1ісе (2); 

console.log (акү3); // Array [ 3, 4, 5 1 


В первом параметре можно указать отрицательное значение. В этом случае смеще- 
ние отсчитывается от конца массива. Получим два последних элемента: 


мау arri = [1, 2, 3, 4, 5 |; 
var агү2 = агг1.51ісе(-2); 
console.log (arr2); // Array [ 4, 5] 


3.6.12. Преобразование массива B строку 


Преобразовать массив в строку позволяют следующие методы: 


О ісіп(І<Разделитель>1) — возвращает строку, полученную в результате объеди- 
нения всех элементов массива через разделитель: 


var arr = | "Один", "Два", "Три" |; 


маг str = агг.јоіп(" - "); 


сопзо1е.1о9 (str); // Один - Два - Три 


Если параметр не указан, то в качестве символа-разделителя будет ИСПОЛЬЗО- 
ваться запятая: 


var arr = | "Один", "Два", "Три" |; 


var str = arr.join(); 


console.log (str); // Один, Два, Три 


П toString() — преобразует массив в строку. Элементы указываются через запя- 
тую без пробела. Метод вызывается автоматически при использовании строко- 
вого контекста: 


var arr = | "Один", "Два", "Три" |; 


console.log (arr.toString()); // Один,Два,Три 


сопѕо1е.1од (агг + ""); // Один,Два,Три 
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С toLocaleString() — преобразует массив в строку. Элементы указываются через 
запятую без пробела. Если элементами массива являются объекты, то для преоб- 
разования в строку будет вызван метод toLocaleString() этого объекта: 


мас arr = | new Гағе(), 1234.45678 1; 
console.log (arr.toString()); 

// Wed Dec 06 2017 11:10:58 GMT+0300,1234.45678 
console.log (arr.toLocaleString()); 

// 06.12.2017, 11:10:58,1 234,457 


3.6.13. Проверка наличия элемента в массиве 


Выполнить поиск элемента в массиве позволяют следующие методы: 


П іпаехоғ (<Элемент>[, <Индекс>1) -- ищет первое вхождение элемента в массиве. 
Сравнение выполняется с помощью оператора === (строго равно). Возвращает 
индекс найденного элемента или значение -1, если элемент не найден. Во вто- 
ром параметре можно указать индекс, с которого начнется поиск. Если второй 
параметр не указан, то поиск начинается с начала массива: 


variari ЕТ 252,2, 31 
console.log (агг.1паехОЕ(2)); // 1 
сопво1е.1оа(акк.іпдехоҒ(2, 2)); // 3 
console.log (агг.1паехоОЕ (3)); // 4 
console.log (агг.1паехоЕ (8) ); ДЕЛ 
п lastIndexOf (<Элемент> [, <Индекс>]) --- ищет последнее вхождение элемента в 
массиве: 
var агг = | 1, 2, 1, 2,3 |; 
console.log (агг.ІаѕіІпадехо# (2)); ИЗ 
console.log (arr.lastIndexOf (2, 2)); // 1 
console.log (агг. 1азЕТпаехоЕ (3)); // 4 
console.log (агг.ІаѕіІпадехо# (8)); // -—1 
п includes (<Элемент>|, <Индекс>]) — возвращает значение true, если элемент 


присутствует в массиве, и false — в противном случае. Во втором параметре 
можно указать индекс элемента, с которого начнется поиск: 


var arr = | 1, 2, 3 |, агг2 = І 1, 2, -3 1; 
console.log (arr.includes (1)); // true 
console.log (arr.includes(1, 1)); // false 
console.log (arr2.includes (3)); // false 
o еуегу (<Функция>[, <this>]) — возвращает значение true, если все элементы 


массива соответствуют заданному условию, и Ға1зе-- в противном случае. 
В первом параметре указывается ссылка на функцию, которая будет вызвана для 
каждого элемента массива. Функция принимает три параметра: через первый 
параметр доступно значение текущего элемента, через второй — его индекс, а 
через третий — ссылка на массив. Функция должна вернуть значение true, если 
элемент соответствует условию, и Ға1зе-- в противном случае. Если функция 
для всех элементов вернула true, то метод еуегу() также возвращает значение 
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true. Если функция вернет значение false, ТО проверка прекращается, и метод 
еуегу() возвращает значение false. Значение, указанное во втором параметре, 
будет доступно внутри функции через указатель this: 

function test (value, index, ar) { 


return value > 0; 


} 


мау агг = | 1, 2, 3 |, агг2 = І 1, 2, -3 1; 
сопѕо1е.1од (агг.еуегу(беѕі)); // true 
console.log (агг2.еуегу(беѕі)); // false 
О some (<Функция> [, <ЕҺіз>І) — возвращает значение true, если хотя бы один эле- 


мент массива соответствует заданному условию, и false — в противном случае. 
Если функция вернет значение true, то проверка прекращается, и метод воте() 
возвращает значение true. Если функция для всех элементов вернула false, ТО 
метод some () также возвращает значение false: 


function test (value, index, аг) ( 
return value < 0; 


} 


var arr = | 1, 2, 3 |І, агг2 = І 1, 2, -3 1; 
console.log (агг. зоще (test)); // false 
console.log (arr2.some (test) ); // true 
o Ғіпа (<Функция>[, <this>]) — возвращает значение первого элемента, для KOTO- 


poro функция вернула true, или значение undefined, если функция для всех эле- 
ментов вернула false: 
function test (value, index, ar) { 


return value < 0; 


} 


мау агг = | 1, 2, 3 |, агг2 = [1, 2, -3 1; 
console.log (arr.find(test)); // undefined 
console.log (arr2.find(test)); айы 
O findIndex (<Функция>[, <this>]) — возвращает индекс первого элемента, для ко- 


торого функция вернула true, или значение -1, ЕСЛИ функция для всех элементов 
вернула false: 
function test (value, index, ar) { 


return value < 0; 


} 


var arr = | 1, 2, 3 |, arr2 = І 1, 2, -3 1; 
console.log (arr.findIndex (ёеѕі)); // -1 
console. log (arr2.findIndex (test) ); уу? 


3.6.14. Фильтрация массива 


Метод filter (<Функция>[, <this>]) позволяет выполнить фильтрацию массива. 
В первом параметре указывается ссылка на функцию, которая будет вызвана для 
каждого элемента массива. Функция принимает три параметра: через первый пара- 
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метр доступно значение текущего элемента, через второй — его индекс, а через 
третий — ссылка на массив. Функция должна вернуть значение true, если элемент 
соответствует условию, и false — в противном случае. Значение, указанное во BTO- 
ром параметре, будет доступно внутри функции через указатель this. Метод 
возвращает массив элементов, соответствующих условию (для которых функция 
вернула значение true). Исходный массив не изменяется: 


function test (value, index, аг) ( 
return value < 4; 
} 
маг агг = | 1, 2, 3, 4, 5, 6 |]; 
var arr2 = arr.filter (test); 
console.log (arr2); // Array [ 1, 2, 3 | 


С помощью метода тар (<Функция>[, <this>]) можно применить пользовательскую 
функцию ко всем элементам массива. Внутри функции нужно вернуть новое значе- 
ние элемента. Метод map () возвращает отфильтрованный массив. 


Вот пример умножения всех элементов массива на 2: 


мас агг = | 1, 2, 3, 4, 5, 6 ]; 
var arr2 = arr.map (function (value, index, ar) { 
return value * 2; 
Юю; 
сопзо1е.104 (агг2); // Array [ 2, 4, 6, 8, 10, 12 ] 


Метод reduce (<Функция>[, <Начальное значение>]) применяет функцию к парам 
элементов и накапливает результат. В первом параметре указывается ссылка на 
функцию, которая будет вызвана для каждого элемента массива. Функция прини- 
мает четыре параметра: через первый параметр доступен результат предыдущих 
вычислений или <Начальное значение> при первом вызове, через второй -- значение 
текущего элемента, через третий — его индекс, а через четвертый — ссылка на 
массив. Внутри функции нужно вернуть результат текущих вычислений. Метод 
reduce () возвращает общий результат вычислений. 


Вот пример получения суммы всех элементов массива: 


маг агг = | 1, 2, 3 1; 

var sum = arr.reduce (function (valuel, value2, index, аг) { 
return уа1ае1 + value2; 

}, 0); 

console.log (sum); // 6 


Метод reduceRight () аналогичен методу reduce (), но перебирает элементы не слева 
направо. а справа налево. 


Вот пример преобразования многомерного массива в одномерный: 


var arr = | [1, 21, [3, 4] ]; 

var sum = arr.reduceRight (function (агг1, arr2, index, аг) { 
return arr1.concat (arr2); 

к 11); 

console.log (sum); // Аккау [ 3, 4, 1, 21 
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3.6.15. Ассоциативные массивы 


Основным отличием ассоциативных массивов от обычных является возможность 
обрашения к элементу массива не по числовому индексу, а по ключу, представ- 
ляющему собой строку. Ключи ассоциативных массив в JavaScript на самом деле 
являются свойствами объекта, поэтому для создания ассоциативного массива луч- 
ше использовать класс Object: 


var arr = new Object(); 


агг ["Один"] = 1; 
arr["IBa"] = 2; 
агг ["Три"] = 3; 
console.log (агг ["Один"]); // 1 
console. log (арг ["Два"]); // 2 
console.log (арг ["Три"]); // 3 


Ассоциативные массивы используются также для доступа к свойствам объекта 
вместо классической точки. Для получения числа элементов массива ранее мы 
обращались к свойству length класса Array следующим образом: 


маг arr = | "Один", "Два", "Три" |; 


console.log (arr.length); // 3 


С помошью ассоциативных массивов обрашение K свойству length будет выглядеть 
так: 


маг arr = | "Один", "Два", "Три" |; 


console.log (arr["length"]); // 3 


Перебор ассоциативных массивов 


Как вывести все элементы массива? Ни один из методов класса Аггау не позволяет 
вывести элементы ассоциативного массива. Кстати, свойство length также не рабо- 
тает. По этой причине перебрать все элементы массива с помощью стандартного 
цикла Гог не получится. 


Для этой цели существует специальный цикл Ғоғ.. .іп. Он имеет следующий фор- 
мат: 
for (<Переменная> іп <Экземпляр класса>) { 


<Тело цикла> 


} 


Цикл Ғос...іп на каждой итерации присваивает параметру <Переменная> ИМЯ свой- 
ства (ключа), с помощью которого можно получить значение соответствующего 
элемента ассоциативного массива: 


var arr = new Орјесі+ (); 
агг ["Один"] = 1; 


arr["IBa"] = 2; 
arr["Tpnu"] = 3; 
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for (var key іп arr) ( 
// Переменной key на каждой итерации присваивается 
// ключ текущего элемента ассоциативного массива 
сопѕо1е.1од (кеу + " = " + агк[Кеу]); 


} 


В игоге мы получим следующий результат: 


Один = 1 
Два = 2 
Три = 3 
Класс Мар 


В последних версиях некоторых \!еБ-браузеров для создания ассоциативного MaC- 
сива можно воспользоваться классом Мар. В отличие от обычных свойств объектов, 
ключами могут быть не только строки, но и другие объекты. Пример использова- 
ния класса Мар приведен в листинге 3.24. 


Листинг 3.24. Класс Мар 


var arr = new Мар(); 


// Добавление элементов и изменение значений 
агг.зек("Один", 1); 
агг.зек("Два", 2); 


агг.зеф ("Три", 3); 


// Получение элемента по ключу 
console.log (arr.get ("Два")); // 2 
// Получение числа элементов 


console.log (арг. ѕіхе); 7/73 

// Проверка наличия ключа 

console.log (arr.has ("Три") ); // true 

console.log (агг.һаѕ ("Сто") ); // false 

// Получение списка ключей и значений 
console.log([...arr.keys()]); // Array [ "Один", "Два", "Три" 1 
соп501е.1о9([...агх.уа1аез()]); // Array [ 1, 2, 3 ] 


// Перебор элементов 
for (var key of агг.Кеу$()) 1 

console.log (key + " - " + arr.get (key)); 
} 


arr.forEach (function (value, key, ar) { 


console.log (key + " - " + value); 


Юю; 
console.log(arr); // Мар { Один: 1, Два: 2, Три: 3 } 


// Удаление элементов 

console.log (arr.delete ("Три")); // true 
console.log (arr.size); // 2 
агг.сІеаг(); 


сопѕо1е.1од (арг. ѕіхе); // 0 
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3.6.16. Множества 


Множество — это набор уникальных элементов. В последних версиях некоторых 
\МеБ-браузеров для создания множества можно воспользоваться классом Set. При- 
мер использования класса Set приведен в листинге 3.25. 


Листинг 3.25. Класс Set 


yar âri Да, ч2, 13, 01 03 Ду 
// Останутся только уникальные элементы 
var mySet = new бек(агг); 
console.log (mySet); // Set [ 1, 2, 31 
// Преобразование множества в массив 

var агү2 = Аггау. Егом (шуде); 


сопзо1е.1о4 (агг2); // Array 12.25 8 


// Добавление элементов 
mySet.add (4); 
mySet.add (2); // Не будет добавлен, т. к. значение не уникально 


// Получение числа элементов 


console.log (mySet.size); // 4 

// Проверка наличия элемента 

console.log (mySet.has (1)); // true 

console.log (mySet.has (5)); // false 

// Получение списка ключей и значений 

console.log ([...шубефе.кеуз ()]); // Array І 1, 2, 3, 4 ] 
console.log ([...mySet.values()]); // Array [ 1, 2, 3, 4 1 


// Перебор элементов 

for (var value of шубее) ( 
console.log (value); 

} 

mySet.forEach (function (value) { 


console.log (value); 
Юю; 
// Удаление элементов 
console.log (mySet.delete(4)); // true 
console.log (mySet.size); // 3 


( 
пубее.с1еаг(); 
console.log (mySet.size); // 0 


3.7. Строки 


Строки являются упорядоченными последовательностями символов. Следует 
учитывать, что символы внутри строки изменить нельзя, поэтому все строковые 
методы в качестве значения возвращают новую строку. 
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3.7.1. Инициализация строк 


В языке JavaScript для хранения строк предназначен тип данных string: 


var str = "Строка"; 
console.log (typeof str); // string 


Строка может быть указана как внутри двойных кавычек, так и внутри апострофов 
(разницы между этими способами нет): 


var str = "Строка"; 
console.log (str); // Строка 


Создать строку можно также с помощью класса String ПО следующей схеме: 
<Экземпляр класса> = new String (<Значение>); 
Пример: 


var str = new 5іегіпа("Строка"); 
console.log (typeof str); // object 


При создании экземпляра класса String THN ДАнных будет object, a He string. Yro- 
бы получить обычную строку, нужно воспользоваться методом toString() ИЛИ 
valueof(): 


var str = new 5іегіпа("Строка"); 
var str2 = str.toString(); 


console.log (str2); // Строка 
console.log (typeof str2); // string 
console.log (typeof str.valueOf()); // string 


Таким способом создания строки пользуются редко. Все методы класса String ДОС- 
тупны и при использовании элементарного типа. Преобразование элементарного 
типа в объектный выполняется автоматически: 


var str = "Строка"; 

var str2 = str.toUpperCase(); // Перевод символов в верхний регистр 
console.log (58:2); // СТРОКА 

console.log (typeof str2); // string 


При использовании метода toUpperCase() строка, имеющая тип данных string, 
автоматически преобразуется в экземпляр класса String. Затем производится изме- 
нение (в нашем случае — перевод символов в верхний регистр) и возврашается 
строка, имеющая тип данных ѕігіпд. Таким образом, класс String является клас- 
сом-оберткой над элементарным типом string. 


Для преобразования значения в строку можно использовать следуюший формат: 
<Переменная> = String (<Значение>); 
Пример: 


var str = Ѕігіпд (10); 
console.log (str); // 10 
console.log (typeof str); // string 
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Статический метод ҒгопСһагкСойе(<Код 1>,...,<Код N>) ИЗ класса String позволяет 
создать строку из указанных кодов символов в кодировке Unicode: 


var str = String.fromCharcode (1055, 1088, 1080, 1074, 1077, 1090); 
console.log (str); // Привет 
console.log (typeof str); // string 


3.7.2. Специальные символы B строке 


Специальные символы — это комбинации знаков, обозначающие служебные или 
непечатаемые символы, которые невозможно вставить обычным способом. Приве- 
дем специальные символы, доступные в языке JavaScript: 


\п — перевод строки; 
\г — возврат каретки; 


\Е — перевод страницы; 


o 

o 

o 

С \+ — знак табуляции; 

С \у — знак вертикальной табуляции; 
СО \' — апостроф; 

О \" — кавычка; 

\\ — обратная косая черта. 


Именно с помощью специального символа \п (перевод строки) мы можем разбить 
сообщение в диалоговом окне на несколько строк: 


alert ("Строка1 \пСтрока2\п\пСтрока4") ; 
С помощью последовательности \uNNNN можно вставить в строку символ в коди- 
ровке Unicode: 


console.log ("\u005B"); // [ 
console. log ("\u005D"); Г 1 


Кодировка Unicode содержит не только буквы и цифры, но и различные символы, 
которые можно использовать на страницах как значки вместо изображений. Выве- 
дем символ в виде ножниц: 


console. log ("\02702"); // Символ "ножницы" 


3.7.3. Конкатенация строк 


Для объединения строк (конкатенации) предназначен оператор +. Для чисел этот 
оператор выполняет сложение, но если с одной из сторон от оператора + находится 
строка, то второй операнд преобразуется в строку, а не в число: 


var str = "Строка1" + "Строка2"; 
сопво1е.104( str ); // Строка1Строка2 


Часто необходимо сформировать строку, состоящую из имени переменной и ее 
значения. Если написать так: 
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var x = 10; 
var str = "Значение равно x"; 
сопво1е.104( str ); // Значение равно х 


то переменная str будет содержать значение "Значение равно X", а если так: 


var x = 10; 
var str = "Значение равно " + х; 
сопво1е.104( str ); // Значение равно 10 


то переменная str будет содержать значение "Значение равно 10". 
Для объединения строк можно также воспользоваться оператором +=: 


var str = "Строка1"; 
str += "Строка2"; 
сопво1е.104( str ); // Строка1Строка2 


3.7.4. Определение длины строки 


Получить длину строки в символах позволяет свойство length: 


var str = "Строка"; 
console.log( str.length ); // 6 


3.7.5. Обрашение к отдельному символу в строке 


K символу строки можно обратиться как к элементу массива. Достаточно указать 
его индекс в квадратных скобках. Нумерация начинается с нуля. Можно только 
получить символ по индексу, а вот изменить символ по индексу нельзя: 


var str = "Строка"; 
сопво1е.1о4( str[1] ); // т 


Вместо квадратных скобок лучше использовать метод сһагАї (<Индекс символа>): 


var str = "Строка"; 
сопзо1е.109( str.charAt (0) ); // С 
сопво1е.1о4( str.charAt(1) ); // т 


Метод charCodeAt (<Индекс символа>) позволяет получить код символа в кодировке 
Unicode: 


var str = "Строка"; 
console.log( str.charCodeAt (0) ); // 1057 
console.log( str.charCodeAt (1) ); // 1090 


Строки поддерживают итерации, поэтому мы можем перебрать все символы в цикле: 


for (var char of "Строка") { 
console.log (char); 


} 


Можно также преобразовать строку в массив, в котором каждый элемент будет CO- 
держать только одну букву: 
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var arr = Аггау. Егом ("Строка"); 
console.log (агг); // Аггау [ Tow "т", "р"; vot "кты, TaN ] 


3.7.6. Изменение регистра символов 


Для изменения регистра символов предназначены следующие методы: 


С toLowerCase () — преобразует символы к нижнему регистру: 
var str = "строка СТРОКА СтРоКа"; 
сопво1е.1о4( str.toLowerCase() ); // строка строка строка 
С toUpperCase () — преобразует символы к верхнему регистру: 
var str = "строка СТРОКА СтРоКа"; 
console.log( str.toUpperCase() ); // СТРОКА СТРОКА СТРОКА 
С toLocaleLowerCase () преобразует символы к нижнему регистру, учитывая на- 


стройки локали: 


var str = "строка СТРОКА СтРоКа"; 


сопво1е.1о4( str.toLocaleLowerCase() ); // строка строка строка 


П toLocaleUpperCase() — преобразует символы к верхнему регистру, учитывая Ha- 
стройки локали: 


var str = "строка СТРОКА СтРоКа"; 
сопво1е.104( str.toLocaleUpperCase() ); // СТРОКА СТРОКА СТРОКА 


3.7.7. Получение фрагмента строки 


Получить фрагмент строки позволяют следующие методы: 


O substr (<Начало фрагмента>(, <Длина фрагмента>]) -- извлекает фрагмент строки 
заданной ДЛИНЫ. Если второй параметр пропущен, возвращаются все символы 
до конца строки: 


var str = "строка"; 
console.log (str.substr(0, 1)); // с 
console. log (str.substr (1)); // трока 
O substring (<Начало фрагмента>[, <Конец фрагмента>]) -- также извлекает фраг- 


мент строки, заданный в этом случае индексами начального и конечного симво- 
лов. Последний символ во фрагмент не включается: 


var str = "строка"; 
console.log (str.substring(0, 1)); // с 
console.log (str.substring(1, 4)); // тро 
console.log (str.substring(1)); // трока 
С ѕ1ісе (<Начало фрагмента>[, <Конец фрагмента>]) — также извлекает фрагмент 


строки, заданный в этом случае индексами начального и конечного символов. 
Последний символ во фрагмент не включается: 
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var str = "строка"; 
сопзо1е.1оа(зЕс.511ісе(0, 1)); // с 
сопзо1е. 104 (ѕіг.ѕ1ісе (1, 4)); // тро 
сопзо1е. 1094 (зір. ѕ1ісе (1)); // трока 


Различие между методами substring() и ѕ1ісе() проявляется при использовании 
отрицательных индексов. Метод substring() трактует отрицательное значение 
как о, а метод slice () вычитает это значение из длины строки: 


var str = "строка"; 

console.log (str.substring (-2)); // строка 
console.log (ѕіг.ѕ1ісе (-2)); // ка 
console. log (str.substring(1, -2)); // с 
сопзо1е.1оа(зЕс.511се(1, -2)); // тро 


3.7.8. Сравнение строк 


Для сравнения строк можно использовать операторы сравнения: 


console. log ("строка" == "строка"); // true 
console.log ("строка1" > "строка2"); // false 
console.log ("cTpokal" < "строка2"); // true 


Сравнение зависит от регистра символов. Кроме того, следует учитывать, что буква 
«ё» не входит в диапазон от «а» до «я»: 


сопѕо1е.1од("я" > "ё"); // false 
console.log ("я".сһагСодеА+ (0)); // 1103 
console.log ("ё".сһагСодеАї (0)); // 1105 
console.log ("е".сһагСойеА+ (0)); // 1077 
console. log ("ж".сһагСодеАё (0)); // 1078 


Для сравнения строк с учетом настроек локали следует воспользоваться методом 
зіг1.1оса1еСотраге (в-г2). Метод возврашает: 


O положительное число если str1 больше 56:2, 


o отрицательное число если stri меньше str2; 


С о — если строки равны. 


Пример: 

console.log ("я".]оса1еСотраге ("ё")); // 1 
console.log ("&".1оса1еСотраге ("я")); // -1 
console.log ("a".localeCompare ("я")); // 0 


3.7.9. Поиск n замена в строке 


Для поиска и замены в строке используются следующие методы: 


п іпдехоЕ(<Подстрока>|, <Начальная позиция поиска>]) — возвращает индекс MO- 
зиции первого вхождения подстроки в текущей строке. Если второй параметр не 
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задан, то поиск начинается с начала строки. Если подстрока не найдена, возвра- 
щается значение -1: 


var str = "строка строка"; 

console.log (str.indexOf ("стр")); // 0 

console.log (str.indexOf ("стр", 3)); // 7 

console.log (5Ег.1паехоОЕ ("Стр")); Jf ET 

ІазсІпдехОоҒ(<Подстрока>(, <Начальная позиция поиска>]) — определяет индекс 


позиции последнего вхождения подстроки в текущей строке. Поиск ведется от 
конца к началу. Если подстрока не найдена, возвращается значение -1: 


var str = "строка строка"; 

console.log (5Ег.1азЕТпаехоОЕ ("стр")); // 1 

console.log (str.lastIndexOf("ctTtp", 6)); // 0 

console.log (str.lastIndexOf ("Стр")); Z= 

startsWith (<Подстрока>[, <Начальная позиция поиска>]) -- возвращает значение 


true, если строка начинается с подстроки, и false — в противном случае: 


var str = "строка"; 

console.log (str.startsWith("ctTp")); // true 

console.log (str.startsWith("oka", 3)); // true 

console.log (str.startsWith("CTp")); // false 

endsWith (<Подстрока>[, <Длина>]) — возвращает значение true, если строка за- 


канчивается подстрокой, И false — в противном случае: 


var str = "строка"; 

console.log (str.endsWith ("ока") ); // true 

console.log (ѕіг.епаѕиіїёћ ("стр", 3)); // true 

console.log (str.endsWith("oKA")); // false 

trim удаляет пробельные символы в начале и конце строки: 

var str = " строка \n\t\v\r"; 

сопво1е.1оа(""" + зкк.жгіп() + "'"); // "строка! 

trimLeft () — удаляет пробельные символы в начале строки (метод не входит 


в стандарт языка и может не работать в некоторых \!еЬ-браузерах): 


маг str = строка А 
console.log ("'" + str.trimLeft() + "'"); // "строка ' 
trimRight () — удаляет пробельные символы в конце строки (метод не входит 


в стандарт языка и может не работать в некоторых \!еЬ-браузерах): 


var str строка ; 


сопзо1е.1о4("'" + str.trimRight() + "'"); // ' строка" 


search (<Регулярно определяет индекс позиции первого вхожде- 
ния подстроки, совпадающей с регулярным выражением; 


выражение>) 


шассһ(<Регулярное выражение>) — возвращает массив с результатами поиска, 
совпадающими с регулярным выражением; 
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О керіасе(<Регулярное выражение>, <Текст для замены>) — возвращает строку, 
которая является результатом поиска и замены в ИСХОДНОЙ строке с использова- 
нием регулярного выражения. 


Примеры использования последних трех методов мы рассмотрим при изучении 
регулярных выражений и встроенного класса RegExp (см. разд. 3.8). 


3.7.10. Преобразование строки в массив 


Метод split (<Разделитель>[, <Лимит>1) возвращает массив, полученный в резуль- 
тате разделения строки на подстроки по разделителю. Если второй параметр при- 
сутствует, то он задает максимальное количество элементов в результирующем 
массиве: 


var str = "А\ЕВ\ЕС\ ЕО"; 
var arr = str.split("\t"); 


console.log (агг); // Атгау [ "А", "В", "С", "р" ] 
агг = Sti split{"\t 3); 
console.log (агг); // Атгау [ "А", "В", "С" ] 


Если в первом параметре указать пустую строку, то каждый элемент массива будет 
содержать по одной букве: 


var str = "строка"; 
var arr = str.split(""); 
console.log (агг); // Array [ "с", "т", "р", "o", "к", "a" ] 


3.7.11. ӘКІ--кодирование строк 


Выполнить ОЕГ.-кодирование строки позволяют следующие глобальные функции: 
С encodeURI (<ОВ1-адрес>) — кодирует ОВГ-адрес целиком; 
П decodeURI (<Строка>) — декодирует строку, закодированную функцией encodeURI (): 


var url = "ёеѕі.рһр?іа=5&п=тест"; 

var str = encodeURI (url); 

console.log (эр); // test.php?id=5&n=%D1%82%D0%B5%D1%81%D1%82 
console.log (decodeURI (str)); // test.php?id=5&n=TecT 


С encodeURIComponent (<Строка>) — выполняет ОКІ -кодирование строки: 


var str = епсоае0ВТСопропеп ("Строка"); 
сопзо1е.1о4 (зір); // %00%11%01%82%01%80%р05ВЕ%р0%ВА%р0%5В0 
console.log (decodeURIComponent (str)); // Строка 


В отличие от функции encodeURI (), заменяет все спецсимволы шестнадцатерич- 
ными кодами: 


var url = "беѕё.рһр?п=тест"; 

var str = encodeURIComponent (url); 

console.log (5%); // test.php%3Fn%3D%D1%82%D0%B5%D1%81%D1%82 
console.log (decodeURIComponent (str)); // test.php?n=TecT 
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П decodeURIComponent (<Строка>) -- декодирует строку, закодированную функцией 
encodeURIComponent (). 


3.7.12. Выполнение команд, содержащихся в строке 


Глобальная функция ета1 (<Строка>) выполняет выражение JavaScript, хранящееся 
в строке: 


мау Ек = "3 + 5"; 

var x = еуа1 (3%г); 

console.log (х); // 8 
console.log (typeof х); // number 


3.8. Регулярные выражения 


Регулярные выражения предназначены для сложного поиска или замены в строке. 
Использовать регулярные выражения в языке JavaScript позволяет класс RegExp. 


3.8.1. Создание шаблона 


Создать шаблон регулярного выражения можно двумя способами: 


<Шаблон> = new RegExp (<Регулярное выражение>[, <Модификатор>]); 


<Шаблон> = /<Регулярное выражение>/ [<Модификатор>]; 


Необязательный параметр <Модификатор> задает дополнительные параметры поиска. 
Он может содержать следующие символы (или их комбинацию): 


С : — поиск без учета регистра; 
С ч— глобальный поиск (поиск всех вхождений регулярного выражения в строке); 


O m— многострочный режим. Символ ^ соответствует началу каждой подстроки, 
а символ $ — концу каждой подстроки: 


маг р = new ВедЕхр ("^ [0-9]$", "mg"); 

var str = "1\п2\п3\пстрока\п4"; 

var arr = str.match (p); 

console.log (arr); // Array [ "1", "2", "3", "4" 1 


3.8.2. Методы класса String 


При изучении класса String нами были оставлены без внимания три метода: 
search (), шаесҺ() И геріасе(). Рассмотрим их подробно: 


п search (<Регулярное выражение) возвращает индекс позиции первого вхожде- 
ния подстроки, совпадающей с регулярным выражением, или значение -1, ЕСЛИ 
совпадений нет: 


var р = /201141/; 
мас str = "200, 201, 202, 203, 204"; 
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console.log (str.search(p)); // 5 
console.log ("200".search(p)); // -1 


Шаблону 201141 соответствуют только два числа: 201 и 204; 


П match (<Регулярное выражение>) — возвращает массив с результатами поиска, 
совпадающими с регулярным выражением, или значение по11, если совпадений 
нет: 


var р = /20[14]/; 

var str = "200, 201, 202, 203, 204"; 

var arr = str.match (p); 

console.log (агг); // Array [ "201" ] 
console.log ("200".таїсһ (р)); // null 


Этот пример выведет только 201, Т.К.Не указан модификатор глобального ПОИС- 
ка а. Модифицируем шаблон, чтобы получить все вхождения: 

var р = /20[14]/9; 

час str = "200, 201, 202, 203, 204"; 

var arr = str.match (р); 

console.log (агг); // Атгау [ "201", "204" 1 


Теперь будут выведены все подстроки, совпадаюшие с регулярным выраже- 
нием; 


П геріасе(<Регулярное выражение>, <Текст для замены>) -- возврашает строку, 
которая является результатом поиска и замены в исходной строке с использова- 
нием регулярного выражения: 


var р = /201[14]/9; 

var str = "200, 201, 202, 203, 204"; 

var str2 = ѕіг.гер1асе (р, "207"); 

console.log (58:2); // 200, 207, 202, 203, 207 


В качестве первого параметра можно указать строку, но в этом случае будет 
произведена замена только первого вхождения подстроки в исходную строку: 


маг str = "200, 201, 200, 200"; 
var str2 = str.replace("200", "207"); 
console.log (str2); // 207, 201, 200, 200 


В качестве второго параметра можно указать ссылку на функцию. Через первый 
параметр в функции доступна подстрока, полностью соответствующая шаблону. 
Через следующие параметры доступны подвыражения, которые соответствуют 
фрагментам, заключенным в шаблоне в круглые скобки. Через предпоследний 
параметр — смещение подстроки внутри строки, а через последний — исходная 
строка. Функция должна вернуть подстроку для замены. 


В качестве примера найдем все числа в строке и прибавим к ним число 10: 


var р = /([0-9]+) /9; 
мас Str = "200, 201, 202, 203, 204"; 


270 Гпава 3 


var str2 = str.replace(p, function(s, x, offset, source_str) { 
console Irog (х + " " + offset + " " + ѕоцгсе str); 
var п = рагүвеіпе(5, 10); 
п += 10; 
retürn п + ""; 


}); 
сопзо1е.1од (3612); // 210, 211, 212, 213, 214 


В строке для замены можно использовать специальные переменные $1, ..., $N, 
через которые доступны фрагменты, заключенные в шаблоне в круглые скобки. 
Через переменную $ доступна вся подстрока, через переменную $` — фрагмент 
до подстроки, а через переменную 5" — фрагмент после подстроки. 


В качестве примера поменяем два тега местами: 


var р = /<([а-2]+) >< ([а-2]+)>/9; 

мас str = "<Бү><һү>"; 

var str2 = str.replace (p, "<$2><$1>"); 
console.log (5612); // <hr><br> 


Метод врі1іе(<Регулярное выражение>[, <Лимит>1) также поддерживает регулярные 
выражения. Он возвращает массив, полученный в результате разделения строки на 
подстроки по фрагменту, соответствующему регулярному выражению. Если второй 
параметр присутствует, то он задает максимальное количество элементов в резуль- 
тирующем массиве: 


var р = /\s/g; 

var str = "1 2 3\n4\t5\r6"; 

var arr = str.split (p); 

console.log (агг); Жаттау (ы т ты там АСЫЛ лып, 6" 
arr = str.split (p, 3); 

console.log (агг); JE Array р", па", "31 1] 


3.8.3. Методы класса RegExp 


Вместо методов класса String МОЖНО воспользоваться методами класса RegExp: 


O test (<Строка>) — возвращает true ИЛИ false В зависимости OT TOTO, был поиск 
успешным или нет. Если используется глобальный поиск, то при каждом вызове 
метода указатель текущей ПОЗИЦИИ будет перемещаться в конец текущего сопос- 
тавления: 


var р = /20[14]/а; 
var str = "200, 201, 202, 203, 204"; 


console.log (p.test(str)); // true 

console.log (p.test (ѕіг)); // true 

console.log (p.test (str) ); // false 
( ( 


console.log (p.test("200")); // false 


Основы JavaScript. Создаем страницы, реагирующие на действия пользователей 271 


п ехес(<Строка>) — Позволяет получить массив с результатами поиска, совпадаю- 
щими с регулярным выражением. Если используется глобальный поиск, то при 
каждом вызове метода указатель текущей ПОЗИЦИИ будет перемещаться в конец 
текущего сопоставления. Если совпадений нет, то метод вернет значение null: 


var р = / ([0-9]{2}) :([0-9] {2}):([0-9]{2}) /9; 
мау Str = "18:47:27 05:12:22"; 

console.log (р.ехес (ѕёг)); 

Ж” Array P "18:47:27", "18", тат" "21! 
console.log (р.ехес (ѕёг)); 

талау | "0512522". "05", "125, "22" 1] 
console.log (р.ехес (ѕіг)); // null 
console.log (р.ехес ("200")); // null 


Первый элемент массива соответствует найденному фрагменту. Второй, третий 
и четвертый элементы содержат фрагменты, соответствующие группам мета- 
символов ( [0-91 {2}), заключенным в круглые скобки. Номер скобок по порядку 
следования в регулярном выражении соответствует индексу фрагмента в мас- 
сиве. 


Если нужно проверить, чтобы строка полностью соответствовала шаблону, следует 
в шаблоне указать привязку к началу (^) и концу (5) строки. В качестве примера 
проверим правильность введенной даты (листинг 3.26). 


Листинг 3.26. Проверка правильности введенной даты 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<Е1Е1е>Проверка вводимых данных</ііє1е> 
</head> 
<body> 
<script> 


м") ; 


var d = window.prompt ("Введите дату в формате день.месяц.год", 
if (а === null) 1 
document.write ("Вы нажали Отмена"); 
} 
else { 
var р = /^[0-3] [0-9] \. [01] [0-9] \. [0-91{4}$/; 
if (p.test(d)) document.write ("Дата введена правильно"); 


lse document.write ("Вы неправильно ввели дату"); 
} 
</script> 
</body> 
</html> 
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3.8.4. Свойства класса КедЕхр 


Объект регулярного выражения содержит следующие свойства: 


П lastIndex— содержит позицию начала поиска (свойство доступно для чтения 
и записи): 


var р = /[0-9]+/9; 

var STE =NI 23"; 

console. log (p.lastIndex); // 0 

console.log (p.exec(str)); // Array [ "1" ] 
console.log (p.lastIndex); // 1 

console.log (p.exec(str)); // Array [ "2" ] 
console.log (p.lastIndex); // 3 

o global — содержит значение true, если установлен модификатор а, И Ғаізе--- 


в противном случае (свойство доступно только для чтения): 


уаг р = /[0-9]+/9; 
console.log (р.д1ора1); // «кше 
console.log (/[0-9]+/.global); // false 


O multiline — содержит значение true, если установлен модификатор m, И false — 
в противном случае (свойство доступно только для чтения); 


п ignoreCase — содержит значение true, если установлен модификатор i, И 
false — в противном случае (свойство доступно только для чтения); 


П source — содержит регулярное выражение в виде строки без модификаторов: 


var р = /[0-9]+/9; 
console.log (р. ѕоцгсе); // [0-9]+ 


3.8.5. Синтаксис регулярных выражений 


Обычные символы, не имеюшие специального значения, могут присутствовать 
В шаблоне, И ОНИ будут трактоваться как есть. Вот пример указания в шаблоне по- 
следовательности обычных символов: 


var р = /строка/; 
console. log (p.test ("строка")); // true 


Метасимволы 


Как мы уже видели в приведенных ранее примерах, в регулярных выражениях при- 
сутствуют специальные символы — так называемые метасимволы. Они не всегда 
соответствуют отдельным символам строки, а управляют тем, как производится 
проверка строк. Два метасимвола позволяют осуществить привязку выражения 
к началу или концу строки: 


8 ^— привязка к началу строки. Если указан модификатор и, То соответствует 
началу каждой подстроки; 
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П 5 — привязка к концу строки. Если указан модификатор m, то соответствует KOH- 
цу каждой подстроки. 
Рассмотрим на примере, как действует привязка: 


var р = /^[0-9]+$/; // Строка может содержать только числа 


if (р.Жеве("2")) console.log ("Число"); // Выведет: Число 
else сопѕо1Іе.1од ("Не число"); 

if (р.6ез%("Строка2")) console.log ("Число"); 

else console.log ("Не число"); // Выведет: Не число 


Если убрать привязку к началу и концу строки, то любая строка, содержащая число, 
вернет "Число": 


var р = /[0-9]+/; 
if (р.іеѕі ("Строка2")) 


console.log ("Есть число"); // Выведет: Есть число 


else сопѕо1Іе.1од ("Нет числа"); 


Можно указать привязку только к началу или только к концу строки: 


var р = /[0-9]1+$/; 
if (р.іеѕі ("Строка2")) сопзо1е.1оа ("Есть число в конце строки"); 


else console.log ("Нет числа в конце строки"); 


// Выведет: Есть число в конце строки 
р = /^[0-9]+/; 
if (р.6ез%("Строка2")) сопзо1е.1оа ("Есть число в начале строки"); 


else console.log ("Нет числа в начале строки"); 
// Выведет: Нет числа в начале строки 


Квадратные скобки [1 позволяют указать несколько символов, которые могут 
встречаться на этом месте в строке. Можно привести символы подряд или указать 
диапазон через тире: 


С [09] — соответствует числу 0 или 9; 

О [0-9] — соответствует любому числу от 0 до 9; 

П [абв] — соответствует буквам а, би в; 

П [a-r] — соответствует буквам а, 6, в И г; 

О [a-aë] — соответствует любой букве от а до я; 

П [ABB] — соответствует буквам д, Б и в. Обратите внимание: если не указан MO- 
дификатор 1, регистр будет иметь значение; 

П (л-яй| — соответствует любой букве от А до я; 

С (а-ял-я881 — соответствует любой русской букве в любом регистре; 

С [0-9а-яА-яёЁа-2А-7] — любая цифра и любая русская или английская буква 


независимо от регистра. 


ВНИМАНИЕ! 
Буква & не входит в диапазон [а-я]. 
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Значение можно инвертировать, если после первой скобки указать символ ^. Таким 
способом можно указать символы, которых не должно быть на этом месте в етроке: 


С [7091 — не цифра 0 или 9; 
O [70-91 — не цифра от 0 до 9; 


С гГ^а-яА-яёЁа-гА-2] — не русская или английская буква в любом регистре. 


Метасимвол . (точка) соответствует любому символу, кроме символа перевода 
строки (Ха). 


Метасимвол | позволяет задать выбор из двух альтернатив. Так, выражение n|m CO- 
ответствует одному из символов: п ИЛИ п: 


красн (ая) | (ое) — красная ИЛИ красное, НО не красный. 


Стандартные классы 

Вместо прямого указания символов можно использовать стандартные классы: 
П \а — соответствует любой цифре; 

СО \w— соответствует любой латинской букве, цифре и знаку подчеркивания; 


П \ѕ — любой пробельный символ (пробел, табуляция, перевод страницы, новая 
строка или перевод каретки); 


С \p— не цифра; 
С \w— не латинская буква, не цифра и не знак подчеркивания; 
С \5 — не пробельный символ. 


ВНИМАНИЕ! 


Метасимвол \и работает только с буквами латинского алфавита. С буквами русского 
языка он не работает. 


Экранирование специальных символов 


Что же делать, если нужно найти точку, ведь метасимвол «точка» соответствует 
любому символу, кроме символа перевода строки? Для этого перед специальным 
символом необходимо указать символ \ (листинг 3.27). 


Листинг 3.27. Проверка правильности введенной даты 


мас str = "29,10.2017"; 

// Неправильная дата (вместо точки указана запятая) 

var р = /^[0-3]\а. [01] \а. [12] [09] \а\а$/; 

// Символ "\" не указан перед точкой 

if (p.test(str)) console.log ("Дата введена правильно"); 


else console.log ("Дата введена неправильно"); 


// Выведет "Дата введена правильно", т. к. точка означает любой символ 
р = /^[0-3] \а\. [91] \а\. [12] [09] \а\а$/; 
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// Символ "\" указан перед точкой 


if (p.test(str)) сопѕо1іе.1од ("Дата введена правильно"); 


else console.log ("Дата введена неправильно"); 


// Выведет "Дата введена неправильно", 
// т. к. перед точкой указан символ "А", а в дате присутствует запятая 


р = new RegExp ("^ [0-3] \\а\\. [01] \\а\\. [12] [09] \\а\\а$"); 
// Символ "\" указан перед точкой 


if (p.test(str)) console.log ("Дата введена правильно"); 


else console.log ("Дата введена неправильно"); 


// Выведет "Дата введена неправильно", 
// т. к. перед точкой указан символ "\" 


Обратите особое внимание на регулярное выражение в последнем примере: 

"^ [90-31 \\а\\. [01] \\а\\. [121 [09] \\а\\а$" 

В строке символ \ должен заменяться на \\. Поэтому вместо \а указано \\а, а 
вместо \. — \\.. Если этого не сделать, в первом случае Међ-браузер сообщит об 


ошибке, а во втором случае — точка будет соответствовать любому символу, кроме 
символа перевода строки. 


Напомним специальные символы, доступные в JavaScript, которые также доступны 
в регулярных выражениях: 


С \n— перевод строки; 
\: — возврат каретки; 
\Е — перевод страницы; 


o 

o 

O \= — знак табуляции; 

С \v— знак вертикальной табуляции; 
o 


\uNNNN — позволяет вставить символ в кодировке Unicode. 


Метасимвол «точка» теряет свое специальное значение, если его заключить в квад- 
ратные скобки. Кроме того, внутри квадратных скобок могут встретиться символы, 
которые имеют специальное значение (например, ^ и -). Символ ^ теряет свое спе- 
циальное значение, если он не расположен сразу после открывающей квадратной 
скобки: 


var р = /(0971/4; // О, 9 или ^ 

Чтобы отменить специальное значение символа -, его необходимо указать после 
всех символов перед закрывающей квадратной скобкой: 

var р = /[09-]/9; // О, 9 или - 

Все специальные символы можно сделать обычными, если перед ними указать 
символ \: 


var р = /[0\-9]/9; // 0, - или 9 
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Квантификаторы 
Количество вхождений символа в строку задается с помощью квантификаторов: 


С {n} — n вхождений символа в строку (шаблон "[0-91{2}" соответствует двум 
вхождениям любой цифры); 


П (т, } — пили более вхождений символа в строку (шаблон " [0-91 (2, }" соответст- 
вует двум и более вхождениям любой цифры); 


С {n,m} — не менее n и не более m вхождений символа в строку. Числа указывают- 
ся через запятую без пробела. Например, шаблон " [0-91 {2,4}" соответствует от 
двух до четырех вхождений любой цифры; 


O * — ноль или большее число вхождений символа в строку. Эквивалентно KOM- 
бинации (0,); 


O + — одно или большее число вхождений символа в строку. Эквивалентно KOM- 
бинации {1, }; 


O ?— ни одного или одно вхождение символа в строку. Эквивалентно комбина- 
ЦИИ {0,1}. 


«Жадность» квантификаторов 


Все квантификаторы являются «жадными» — при поиске соответствия ищется са- 
мая длинная подстрока, соответствующая шаблону, и не учитываются более корот- 
кие соответствия. Рассмотрим это на примере, для чего получим содержимое всех 
тегов <b> вместе с тегами: 

var р = /<bÞ>.*<\/b>/gi; 

var str = "<b>Text1</b>Text2<b>Text3</b>"; 


console.log (str.match (р)); 
// Array [ "<b>Text1</b>Text2<b>Text3</b>" 1 


Вместо желаемого результата мы получили полностью строку. Чтобы ограничить 
«жадность», необходимо после квантификатора указать символ ?: 

var р = /<р>.*2<\/р>/аді; 

var str = "<b>Text1</b>Text2<b>Text3</b>"; 

console.log (str.match (р)); 
// Array [ "<р>Техі1</р>", "<b>Text3</b>" 1 


OTOT код выведет TO, что мы искали. 


Группы 


Если необходимо получить содержимое без тегов, то нужный фрагмент внутри 
шаблона следует разместить внутри круглых скобок: 

var р = /<р> (.*?) <\/р>/аі; 

var str = "<р>Техі1</р>Техі2<рьТехі3</р>"; 


уаг аге; 
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while ( (arr = р.ехес ($6г)) ) { 
console.log (arr); 

} 

// Array [ "<b>Text1</b>", "Техі1" 1 

// Array [ "<b>Text3</b>", "Text3" 1 


Результат будет доступен через элемент массива с индексом, совпадающем C по- 
рядковым номером круглых скобок внутри шаблона (нумерация начинается с еди- 
ницы). Элемент массива с индексом 0 будет содержать фрагмент, полностью сов- 
падающий с шаблоном. 


Круглые скобки часто используются для группировки фрагментов внутри шаблона. 
В этих случаях не требуется, чтобы фрагмент запоминался и был доступен в ре- 
зультатах поиска: 


var р = /[а-2]+( (3%) | (хЕ)) /91; 


var str = "test text"; 
таг агү; 
while ( (arr = р.ехес ($6г)) ) { 


console.log (агг); 


} 
// Array [ "test", "st", "st", undefined ] 
// Array [ "text", "xt", undefined, "xt" ] 


Три последних элемента в этом примере являются лишними. Чтобы избежать 
захвата фрагмента после открывающей круглой скобки, следует разместить симво- 
ЛЫ ?:. 


var р = /[а-2]+(?: (2:30) | (?:х6)) /91; 


var str = "test text"; 
var arr; 
while ( (arr = p.exec(str)) ) { 


console.log (агг); 
} 
// Array [ "test" ] 
// Array [ "text" ] 


В качестве примера использования групп разберем E-mail (листинг 3.28) и URL- 
адрес (листинг 3.29) на составные части. 


Листинг 3.28. Разбор Е-тай на составные части 


var р = /^([а-20-9_ .-1+)@ ( (2: [а-20-9-]+\.)+[а-=]{2,6})$/1; 
var str = "userlmail.ru"; 
var arr = p.exec (str); 
ЇЕ (агг) { 
console.log (агг); 


"Имя ящика - + агу [ 


, 


] 


console.log 


1 
"Имя сайта - + arr[2] 


( 
( 
console.log ( 
( 


) 
); 
console. log ("Полный E-mail - " + arr[0]); 
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else { 


console.log ("E-mail не соответствует шаблону"); 


В игоге получим следующий результат: 


Array [ "азег@та11.га", "user", "mail.ru" 1 
Имя ящика - user 
Имя сайта - mail.ru 


Полный E-mail - user@mail.ru 


Листинг 3.29. Разбор ОКІ-адреса на составные части 


маг в = "^(\\м+://)" + 
((?: [а-20-9-]+\\.) +[а-2] {2,6})" + 
([а-20-9/-]*/)*" + 
" ([а-20-9-]+\\. [а-2]+) $"; 
var р = new RegExp(s, "1"); 
var str = "http://www.mysite.ru/folder1/folder2/forder3/file.html"; 
var arr = p.exec (str); 


if (arr) { 
console. log ("Протокол - " + arr[1]); 
сопзо1е.1о4("Сайт - " + arr[2]); 
console.log ("Путь - " + arr[3]); 
console.log ("Имя файла - " + arr[4]); 


console.log ("URL не соответствует шаблону"); 


В игоге получим следующий результат: 


ротокол - http:// 

Сайт - www.mysite.ru 

уть - /folder1/folder2/forder3/ 
мя файла - file.html 


Для получения фрагментов можно также воспользоваться статическими свойства- 
МИ $1 ... $N, а для получения полного соответствия — свойством lastMatch. Эти 
свойства не входят в стандарт, но доступны во всех \Меб-браузерах: 


console. log ("Полный URL - " + RegExp.lastMatch); 
console.log ("Протокол - " + ВедЕхр.$1); 
сопзо1е.1о4 ("Сайт - " + ВедЕхр.$2); 
console.log ("Путь - " + ВедЕхр.$3); 
console.log ("Имя файла - " + ВедЕхр.$4); 
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Обратные ссылки 


К найденному фрагменту в круглых скобках внутри шаблона можно обратиться 
с помошью механизма обратных ссылок. Для этого порядковый номер круглых 
скобок в шаблоне указывается после слеша, например \1. Нумерация скобок внутри 
шаблона начинается с 1. 


Для примера получим текст между одинаковыми парными тегами: 


var р = /<([а-2]+) [^>]*?>(.*?)<\/\1>/91; 


var str = "<р>Техе1</р>Техе2<І>Техе3</І>"; 
мас агү; 
while ( (arr = р.ехес ($6г)) ) { 


console.log (агг); 
} 
// Array [ "<b>Text1</b>", "b", "Text1" 1 
// Array [ "<I>Text3</I>", "І", "ТехёЗ" 1 


3.9. Работа с датой и временем 


Работать с датой и временем позволяет класс Date. Экземпляры класса создаются 
так: 


<Экземпляр класса> = new ПРафе(); 
<Экземпляр класса> = new Date (<Число миллисекунд>); 


<Экземпляр класса> = new Date (<Год>, <Месяц>[, <День>[, <Часы>[, 
<Минуты>[, <Секунды>[, <Миллисекунды>1|1111); 
<Экземпляр класса> = new Date (<Строка с датой>); 


3.9.1. Получение текущей даты и времени 


При использовании первого формата возвращается объект с текущей датой и вре- 
менем: 


var а = new Пағе(); 


console.log (а); // Date 2017-12-08T17:54:52.625Z 
console.log (d.toString ()); // Eri Dec 08 2017 20:54:52 GMT+0300 
console.log (d.toLocaleString()); // 08.12.2017, 20:54:52 


Получить число миллисекунд, прошедшее с 1 января 1970 r., позволяет статиче- 
ский метод пом (): 


var t = Рафе.пом (); 
console.log (t); // 1512755778548 


3.9.2. Указание произвольных значений 
даты и времени 


При использовании второго формата дата будет соответствовать числу милли- 
секунд, прошедших с 1 января 1970 r.: 
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мас d = new Date (1512755778548); 
console.log (d.toLocaleString()); // 08.12.2017, 20:56:18 


А при использовании третьего формата можно задать произвольные значения: 
мас а = new ПБафе (2017, 11, 8, 20, 54, 52); 
console.log (d.toLocaleString()); // 08.12.2017, 20:54:52 


Обратите внимание: значения задаются в виде чисел. Кроме того, в параметре 
<Месяц> указываются числа от 0 (январь) до 11 (декабрь), а не от 1 до 12. Если ука- 
зать число 12, то месяц станет январем, а к году будет прибавлена единица. 


Получить число миллисекунд на основе произвольных значений даты и времени 
позволяет статический метод UTC (): 


<Время> = Рафе.0ТС (<Год>, <Месяц>[, <День>[, <Часы> [, 
<Минуты> [, <Секунды>[, <Миллисекунды>]]]]]); 


Пример: 


var t = Date.UTC (2017, 11, 8, 20, 54, 52); 
console.log (t); // 1512766492000 
console.log ((new Date (t)).toString()); 

// Eri Dec 08 2017 23:54:52 GMT+0300 


3.9.3. Разбор строки с датой и временем 


Четвертый формат предназначен для разбора строки с датой и временем: 

var а = new Расе ("Ері Dec 08 2017 20:54:52 СМТ+0300"); 

console.log (d.toLocaleString()); // 08.12.2017, 20:54:52 

Получить число миллисекунд, прошедшее с 1 января 1970 r., на основе строки 
с датой и временем, позволяет статический метод parse (): 


var t = Date.parse("Fri рес 08 2017 20:54:52 СМТ+0300") ; 
console.log (t); // 1512755692000 
console.log ((new Date (t)).toString()); 

// Eri Dec 08 2017 20:54:52 GMT+0300 


Если разобрать строку не удалось, то метод parse () вернет значение Мам. 


3.9.4. Методы класса Рае 


Класс Date поддерживает следующие основные методы: 
О toString() — преобразует дату в строку и возвращает ее: 


var А = new Пафе (1512755692000); 
console.log (d.toString()); 
// Eri Dec 08 2017 20:54:52 GMT+0300 


O toLocaleString () — преобразует дату в строку, используя настройки локали: 


var а = new Date (1512755692000); 
console.log (d.toLocaleString()); // 08.12.2017, 20:54:52 
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O toUTCString() — преобразует дату в строку, используя часовой пояс UTC: 
var а = new Пафе (1512755692000); 
console.log (d.toUTCString()); 
// Eri, 08 Dec 2017 17:54:52 GMT 
С toIsoString() — преобразует дату в строку в формате ISO: 
var а = new Date (1512755692000); 
console.log (d.toISOString()); // 2017-12-08Т17:54:52.0007. 
O valueof () И getTime () — Позволяют определить число миллисекунд, прошедшее 
с 1 января 1970 r.: 
var а = new Пафе (1512755692000); 


console.log (4.ха1аеоЕ()); // 1512755692000 
console.log (d.getTime()); // 1512755692000 
П getDate() и getUTCDate () — возвращают день месяца (от 1 до 31): 
var А = new Пафе (1512755692000); 
console.log (d.getDate ()); // 8 
console.log (d.getUTCDate()); // 8 
С getMonth() и getUTCMonth () — возвращают месяц (от 0 — для января до 11 — ДЛЯ 
декабря): 
var months = | "январь", "февраль", "март", "апрель", "май", 
"июнь", "июль", "август", "сентябрь", "октябрь", 
"ноябрь", "декабрь" 1; 
var а = new Пафе (1512755692000); 
console.log (а. деЕМоп В ()); // 11 
console. log (d.getUTCMonth ()); // 11 
console.log (months [d.getMonth ()]); // декабрь 


Для получения номера текущего месяца к возвращаемому значению необходимо 
прибавить единицу: 


var а = new Date (1512755692000); 


console.log (d.getMonth() + 1); у 12 
п getFullYear () И getUTCFullYear () — позволяют определить год: 
var а = пем Пафе (1512755692000); 
console.log (d.getFullYear()); // 2017 
console.log (d.getUTCFullYear()); // 2017 
П getDay() и getUTCDay() — дают возможность узнать день недели (от 0 — ДЛЯ 
воскресенья до 6 — для субботы): 
var days = [ "воскресенье", "понедельник", "вторник", 
"среда", "четверг", "пятница", "суббота" 1; 
var а = new Пафе (1512755692000); 
console.log (d.getDay()); 275 
console. log (d.getUTCDay ()); I5 


console.log (days [а.деёрау() ]); // пятница 


282 Гпава 3 


С getHours () и getUTCHours () — возвращают час (от 0 до 23): 
var А = new Date (1512755692000); 
console. log (d.getHours ()); // 20 
console.log (d.getUTCHours ()); // 17 
п getMinutes () И getUTCMinutes () — ПОЗВОЛЯЮТ получить минуты (от 0 ДО 59): 
var а = new Пафе (1512755692000); 
console. log (d.getMinutes ()); // 54 
console.log (d.getUTCMinutes ()); // 54 
С getSeconds () и getUTCSeconds () — возвращают секунды (OT 0 до 59): 
var d = new Date (1512755692000); 
console. log (d.getSeconds ()); V S2 
console.log (d.getUTCSeconds ()); // 52 
п демі11іѕесопаѕ () И getUTCMilliseconds () -- возвращают миллисекунды (от 0 
до 999): 
var а = пем Date (1512755692156); 
console.log (а. деёмі11іѕесопаѕ ()); // 156 
console.log (d.getUTCMilliseconds ()); // 156 
o getTimezoneOffset () возвращает смещение зоны местного времени в минутах: 


мас а = new Date (1512755692156); 
console.log (d.getTimezoneOffset()); // -180 


Методы, содержащие в названии фрагмент UTC, возвращают значения, используя 
часовой пояс ОТС, а без него — по местному времени. 


Чтобы задать значения компонентов даты и времени, нужно заменить в названиях 
методов префикс дес префиксом set: 


var а = new Пабе(); 
d.setDate (8); 
d.setMonth (11); 
.setFullYear (2017); 
. setHours (20); 
.setMinutes (54); 
.ѕеіЗесопаѕ (52); 


о о о о о 


.setMilliseconds (156); 
console.log (d.toString()); // Fri Бес 08 2017 20:54:52 СМТ+0300 


3.9.5. Вывод даты и времени в окне \Мер-браузера 


Рассмотрим работу с датой и временем на примере (листинг 3.30). 


Листинг 3.30. Вывод текущей даты и времени 


<!DOCTYPE html> 
<html lang="ru"> 
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<реаа> 
<meta charset="utf-8"> 
<title>Tekymasa дата и Bpema</title> 


<script> 

function numToStr (value) { 
value += ""; // Преобразуем число в строку 
if (value.length == 1) return "0" + value; 


else return value; 


} 
function yearToStr (value) { 


value += ""; // Преобразуем число в строку 
return value. substr (2); 


} 


</script> 

</head> 

<body> 

<script> 

var d = new Date(); 

var days = [ "воскресенье", "понедельник", "вторник", "среда", 

"четверг", "пятница", "суббота" 1; 

var months = [ "января", "февраля", "марта", "апреля", "мая", 
"июня", "июля", "августа", "сентября", "октября", 
"ноября", "декабря" 1; 

маг msg = "Сегодня <br>" + days[d.getDay()] + " "; 


msg += d.getDate() + ""; 


msg += months [d.getMonth()] +" "; 

msg += d.getFullYear() +" "; 

msg += numToStr (а. деЕНойгз ()) + ":"; 

msg += numToStr (d.getMinutes()) + ":"; 
msg += numToStr (d.getSeconds ()) + "<br>"; 
msg += numToStr (d.getDate()) + "."; 

msg += numToStr (d.getMonth() + 1) + "."; 


msg += yearToStr (d.getFullYear()); 
document.write (msg) ; 

</script> 

</body> 

</html> 


B окне Web-6paysepa отобразится надпись (в другое время надпись будет иной, T. K. 
мы работаем с текущим временем): 

Сегодня 

пятница 8 декабря 2017 20:52:20 

08.12.17 


В примере мы использовали две созданные нами функции: 


O numToStr() — если параметр состоит из одной цифры, то функция добавляет пе- 
ред ним о и возвращает строку. Если не применить функцию, то дата 05.04.2017 
будет выглядеть 5.4.2017, т. к. методы класса Date возвращают число; 


П уеагтоѕёг () — функция возвращает последние две цифры года. 
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3.9.6. Таймеры. Создание часов на У/ер-странице 


Таймеры позволяют однократно или многократно выполнять указанную функцию 
через определенный интервал времени. Для управления таймерами используются 
следующие методы объекта window: 


П setTimeout () — создает таймер, однократно выполняющий указанную функцию 
или выражение спустя заданный интервал времени: 


<Идентификатор> = setTimeout (<Функция или выражение>, 
<Интервал>[, <Параметры>]); 


С clearTimeout (<Идентификатор>) — останавливает таймер, установленный мето- 
ДОМ setTimeout (); 


С setInterval() создает таймер, многократно выполняющий указанную функ- 
цию или выражение через заданный интервал времени. 


<Идентификатор> = зе Типбегуа1 (<Функция или выражение>, 
<Интервал>[, <Параметры>]); 


С clearInterval (<Идентификатор>) — останавливает таймер, установленный METO- 
ДОМ setInterval(). 


Здесь <Интервал> — это промежуток времени, по истечении которого выполняется 
<Функция или выражение>. Значение указывается в миллисекундах. В аргументе 
<Параметры> можно указать значения через запятую. Эти значения будут переданы 
в функцию в качестве параметров. 


Приведем пример использования таймеров. В листинге 3.31 созданы часы на Web- 
странице, отображающие время вплоть до секунды. Добавим также возможность 
остановки и запуска часов. 


Листинг 3.31. Часы на УУев-странице 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 


<Е1Е1е>Часы на Меб-странице</&11е> 
<script> 
var timerId; 
function numToStr (value) { 
value += ""; // Преобразуем число B строку 
if (value.length == 1) return "0" + value; 


else return value; 


} 


function startTimer() { // Запускаем таймер 


timerId = setInterval(function() { 
var d = new Date (); 
var msg = numToStr (d.getHours()) + ":"; 
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msg += numToStr (d.getMinutes()) + ":"; 

msg += numToStr (d.getSeconds ()); 

document .getElementById ("div1").innerHTML = msg; 
}, 1000); 
document. дек! 


lementById ("div_start").style.display = "попе"; 


ІН! 


lementById ("div_stop") .style.display = "block"; 


ІЗ! 


document. дек! 
} 
function stopTimer() { // Останавливаем таймер 

сіеагіпбегуа1 (Е1тетТа) ; 

document .getElementById("div_start").style.display = "block"; 

document .getElementById("div_stop").style.display = "попе"; 


} 

</script> 

</head> 

<body onload="startTimer () "> 

<div id="div1"></div> 

<div id="div_start"> 
<input type="button" уа1ае="Запустить часы" onclick="startTimer () "> 

</div> 

<div id="div_stop"> 
<input type="button" уа1ае="Остановить часы" onclick="stopTimer ()"> 

</div> 

</body> 

</html> 


3.10. Функции. Разделение программы 
на фрагменты 


Функция — это фрагмент кода JavaScript, который можно вызвать из любого места 
программы. Создание пользовательских функций позволит уменьшить избыточ- 
ность программного кода и повысить его структурированность. 


3.10.1. Создание функции 


Функция описывается с помощью ключевого слова function ПО следующей схеме: 


function <Имя функции> ( [<Параметры через запятую>]) 1 
<Тело функции> 
[return[ <Возвращаемое значение>1; | 


} 


Функция должна иметь уникальное имя. Для имен действуют такие же правила, что 
и при указании имени переменной. 


После имени функции в круглых скобках можно указать один или несколько пара- 
метров через запятую. Параметров может вообще не быть — в этом случае указы- 
ваются только круглые скобки. 
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Между фигурными скобками располагаются инструкции JavaScript, которые будут 
исполнены после каждого вызова функции. Точка с запятой после закрывающей 
фигурной скобки не ставится. 


Функция может возвращать значение в место вызова функции. Возвращаемое зна- 
чение задается с помощью ключевого слова return. Если ключевое слово return не 
указано или указано без возвращаемого значения, то функция вернет значение 
undefined. 


Пример функции без параметров: 


function showOK() { 
а1еге("Сообшение при удачно выполненной операции"); 


} 
Пример функции с параметром: 


function showMessage (msg) { 
alert (msg) ; 


) 
Пример функции с параметрами, возвращающей сумму двух переменных: 


function sum(x, у) { 
хат Z S RT ух 
return 2; 


} 


В качестве возвращаемого значения в конструкции return можно указывать не 
ТОЛЬКО ИМЯ переменной, но и выражение: 


function sum(x, y) { 
return x + y; 


} 


В программе функции можно вызвать следующим образом: 


зһомОК(); // Сообщение при удачно выполненной операции 

вһомМезваде ("Сообщение"); // Сообщение 

var п = зша(5, 2); // Переменной п будет присвоено значение 7 
showMessage ("п = " + п); //n=7 


Инструкции, указанные после конструкции return, никогда не будут выполнены: 


function sum(x, у) { 
return x + у; 
alert ("Сообщение"); // Эта инструкция никогда не будет выполнена 


} 


В окне консоли в этом случае отобразится предупреждающее сообщение: 
unreachable code after return statement. 


Имя переменной, передаюшей значение функции, может не совпадать с именем 
переменной внутри функции: 
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function sum(x, у) { 
return x + y; 
} 
var varl = 5, var2 = 2, var3; 
var3 = ѕим(уагі, var2); 


Ссылку на функцию можно сохранить в какой-либо переменной. Для этого назва- 
ние функции указывается без круглых скобок: 


function test() { 
alert ("Это функция test()"); 
} 
var x; 
x = test; // Присваиваем ссылку на функцию 
х(); // Вызываем функцию test() через переменную х 
console.log (typeof test); // function 


3.10.2. Расположение функций внутри НТМЕ-документа 


Обычно функции принято располагать в разделе HEAD НТМГ-документа (лис- 
тинг 3.32) или в отдельном файле с расширением js (листинги 3.33 и 3.34). Впро- 
чем, функции могут располагаться и в разделе вору. 


Листинг 3.32. Функция расположена в разделе HEAD 


<!DOCTYPE html> 

<html lang="ru"> 

<head> 
<meta charset="utf-8"> 
<title>ðĝyukumn</title> 
<script> 


function sum(x, y) { 
return x +t y; 
} 
</script> 
</head> 
<body> 
<script> 
var varl = 5, var2 = 2, var3; 
var3 = ѕим(уаг1, var2); 
document.write ("уаг3 = " + var3); 
</script> 
</body> 
</html> 


Листинг 3.33. Функция вынесена в отдельный файл script.js 


<!DOCTYPE html> 
<html lang="ru"> 
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<head> 
<meta charset="utf-8"> 
<title>ðĝynkumn</title> 
<script type="text/javascript" src="script.js"></script> 
</head> 
<body> 
<script> 
var varl = 5, var2 = 2, var3; 
var3 = ѕим(уаг1, var2); 
document.write ("уаг3 = " + var3); 
</script> 
</body> 
</html> 


Листинг 3.34. Содержимое файла script.js 


function sum(x, у) { 
return x + y; 


3.10.3. Knacc Function 


Класс Function позволяет создавать функцию как экземпляр класса. Делается это 
таким образом: 


<Переменная> = new Ғипсвіоп(<Параметр 1>[, ... , <Параметр N>], 
<Тело функции>); 


Например, функцию суммирования двух чисел 


fünction зощ(х, у) { 
return. x + y; 


} 


можно переписать так (оператор рем МОЖНО НЕ указывать): 


var sum = new Function("x", "у", "return x + y"); 
console.log (typeof sum); // function 
console.log (sum(5, 7)); // 12 


Указывать тело функции в виде строки очень неудобно. По этой причине данным 
способом никто не пользуется. 


Каждая функция содержит следующие методы из класса Function: 


П са11 ([<Объект>[, <Параметры через запятую>]]) — вызывает функцию в контек- 
сте объекта <Объект> И передает ей значения, указанные во втором и последую- 
щих параметрах. 


Вот пример вызова функции как метода объекта window: 


function sum(x, у) { 
геіџгп х + у; 


} 


console.log (sum.call (window, 5, 7)); // 12 
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Все имена функций, как и имена глобальных переменных, становятся свойст- 
вами глобального объекта window. Вызов функции в предыдущем примере ana- 
логичен следующему вызову: 


console.log (window.sum(5, 7)); // 12 


Объект, указанный в первом параметре метода са11 (), доступен внутри функции 
через указатель this: 


function sum(x, у) 1 
console.log (this); // Window 
теспеп x- +t y; 


} 


Если первый параметр не указан или имеет значение null, ТО функция вызывает- 
ся в глобальном контексте: 


console.log (зщ. са11 (null, 5, 7)); уу: 22 


ОС apply ( [<Объект>[, <Массив с параметрами>11) — метод аналогичен методу са11 (), 
но значения для функции указываются в виде массива: 


console.log (sum.apply (window, [5, 7])); // 12 
console.log (зат. арр1у (null, [5, 71)); // 12 


3.10.4. Переменное число параметров в функции 


Внутри функции доступна локальная переменная arguments, которая позволяет по- 
лучить доступ ко всем параметрам, переданным функции. Получить доступ к пара- 
метру можно, указав его индекс внутри квадратных скобок. Свойство length позво- 
ляет определить количество параметров, переданных функции: 


function sum(x, у) { 
console. log (агадатете$ .1епаеВ); ТАҚУА 
return arguments[0] + arguments[1]; 

} 

console.log (sum(5, 6)); ZA IL 


Какой в этом смысл? Дело в том, что при использовании переменной arguments 
можно передать функции больше параметров, чем первоначально объявлено. На- 
пример, можно просуммировать сразу несколько чисел, а не только два (лис- 
тинг 3.35). 


Листинг 3.35. Произвольное количество параметров 


function вша(х, у) { 
var z = 0; 
for (var i = 0; i < arguments.length; i++) { 
z += arguments[i]; 
} 
return z; 
} 
console.log (sum(5, 6, 7, 20)); // 38 
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В последних версиях некоторых \еБ-браузеров значения, переданные при вызове 
в большем количестве, чем указано параметров при объявлении, можно поместить 
в массив (листинг 3.36). Для этого перед именем параметра указываются три точки. 
Такой параметр должен быть расположен после всех остальных параметров. 


Листинг 3.36. Произвольное количество параметров 


function- Sumix; у, ...акг) { 
маг 2 = х + у; 
for (var 1 = 0; 1 < ärr -lengthy 1++) { 
2 += arr[i]; 
) 


return 2; 


) 
сопво1е.1о4(вша(5, 6, 7, 20)); // 38 


Первые два значения будут присвоены переменным х И у, а все остальные -- 
добавлены в массив arr. 


3.10.5. Глобальные и локальные переменные 


Глобальные переменные — это переменные, объявленные вне функции. Глобаль- 
ные переменные видны в любой части программы, включая функции. Все глобаль- 
ные переменные становятся свойствами глобального объекта window. 


Локальные переменные — это переменные, объявленные внутри функции. Локаль- 
ные переменные видны только внутри тела функции. Если имя локальной перемен- 
ной совпадает с именем глобальной переменной, то все операции внутри функции 
осуществляются с локальной переменной, а значение глобальной не изменяется. 
Получить значение глобальной переменной внутри функции при наличии одно- 
именной локальной переменной можно через объект window. 


Механизм, регулирующий такое поведение, называется областью видимости 
переменных. Он продемонстрирован в листинге 3.37. 


Листинг 3.37. Глобальные и локальные переменные 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 


<Е1Е1е>Глобальные и локальные rnmepeMmeHHbIe</title> 
<script> 
function test() { 

var varl = 5, var3 = 1; 


document.write ("Локальная переменная varl = " + varl + "<br>"); 
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} 


</script> 


< 
< 
< 
У. 
а 
t 
а 
а 
а 
а 
< 
< 
< 


document.write 


"Локальная переменная var3 = " + var3 + "<br>"); 
Глобальная переменная var2 = " + var2 + "<br>"); 
document.write ("Доступ к одноименной глобальной переменной: "); 


( 
document.write (" 
( 

document.write ( 


/head> 
body> 
script> 
ar varl 
ocument 
est(); 


ocument. 
ocument. 
ocument. 
ocument. 


/script 
/body> 
/html> 


'window.varl = " + window.varl + "<br>"); 


= 10, var2 = 7; 

„.мттЕе ("Глобальная переменная varl = " + varl + "<рү>"); 
мгібе ("Глобальная переменная varl осталась = "); 

write (varl + "<br>"); 


write ("Локальная переменная var3 = " + typeof var3); 


( 
( 
( 
( 


write T. е. не видна вне тела функции"); 


В окне Web-6paysepa получим следующий результат: 


т 


т 


Глобальная переменная varl = 10 
Локальная переменная varl = 5 
Локальная переменная var3 = 1 


лобальная переменная var2 = 7 


Доступ к одноименной глобальной переменной: м1паом.уат1 = 10 


лобальная переменная varl осталась = 10 


Локальная переменная var3 = undefined, т. е. не видна вне тела функции 
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Как видно из листинга 3.36, переменная уагз, объявленная внутри функции test (), 
не доступна вне функции. Глобальную переменную varl не затронуло объявление 
внутри функции одноименной локальной переменной и ее изменение. А глобальная 
переменная уаг2 видна внутри функции test (). 


3.10.6. Область видимости блока 


Во многих языках программирования переменная, объявленная внутри блока 
(внутри фигурных скобок), не видна после блока. В языке JavaScript при объявле- 
нии переменной с помощью ключевого слова var это не так. Если мы объявляем 
переменную внутри блока, например в первом параметре цикла for, то переменная 
будет видна и после закрывающей фигурной скобки: 


Е 


} 


ог (var 


1=0; 1<5; i++) { 


console.log (1); 


сопво1е.104("і = " + i); // і = 5 
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Результат будет аналогичным при объявлении переменной внутри блока: 


var x = 5; 
if (x == 5) 1 
var y = x + 10; 
} 
console.log ("у = " + у); // у = 15 


В последних версиях некоторых Web-6pay3epoB мы можем объявить переменные 
с помощью ключевого слова let. В этом случае область видимости переменных 
будет ограничена блоком, в котором переменная объявлена. Переменная будет 
также видна и во всех вложенных блоках, а вот вне блока она видна не будет: 


var x = 5; 
if (x == 5) 1 
let y = x + 10; 
} 
console.log ("у = " + typeof у); // у = undefined 


При объявлении переменных в первом параметре цикла Ғог область ВИДИМОСТИ 
будет ограничена телом цикла: 
for (Іеї 1 = 0; і < 5; 1++) { 

console.log (1); 


) 
console.log("i = " + typeof i); // i = undefined 


B одной инструкции можно объявить сразу несколько переменных через запятую и 
присвоить им начальные значения: 


{ 
let x, у = 10; 


х=у+5; 

console.log(x + " " + y); // 15 10 
} 
console.log("x = " + typeof ж); // х = undefined 
сопзо1е.1оа ("у = " + typeof у); // у = undefined 


В этом примере мы использовали блок без привязки к какой-либо другой конструк- 
ции. Этот блок просто ограничивает область видимости переменной. 


Повторное объявление переменной приведет к ошибке: 


{ 


let x 
let x 


5% 
20; // SyntaxError: redeclaration of let x 


} 
Ошибка также возникнет при обращении K переменной до ее объявления: 


{ 
сопво1е.1о4("х = " + x); 
// ВеЕегепсеЕгког: can't access lexical 


// declaration `x' before initialization 
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let x = 20; 
} 


При использовании ключевого слова уас мы Получили бы значение undefined: 


console.log("x = " + x); // x = undefined 
var x = 20; 


3.10.7. Способы передачи параметров в функцию 


При вызове в функцию передается копия значения переменной. Таким образом, 
изменение значения внутри функции не затронет значение исходной переменной: 


function test(x) { 
x = 10; 
} 
маг х = 20; 
test (х); 
console.log ("х = " + x); // x = 20 


Однако при использовании обһектов в переменной сохраняется лишь ссылка на 
объект, а не сам объект. Эта ссылка передается в качестве значения в функцию. 
Внутри функции мы не можем присвоить переменной ссылку на другой объект, 
а вот изменить свойства объекта через эту ссылку можем: 


function test(arr) { 
arr[0] = 33; 
} 
var a = [1, 2]; 
test (а); 
console.log(a); // Array [ 33, 2 ] 


Как видно из примера. массив изменился. 


3.10.8. Необязательные параметры 


Некоторые параметры можно сделать необязательными. Для создания необязатель- 
ных параметров используется проверка равенства значению undefined или опера- 
тор || (если первое выражение не может быть преобразовано в true, то возвращает- 
ся значение второго выражения): 


function test(str) 1 
str = str || "Значение по умолчанию"; 
return str; 


} 
console.log( test() ); // Значение по умолчанию 
console.log( test ("Значение указано") ); // Значение указано 


В последних версиях некоторых УУер-браузеров значения по умолчанию можно 
указать при объявлении параметров: 
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function test (str="3Hauenne по умолчанию") 1 


return str; 
} 
console.log( test() ); // Значение по умолчанию 
сопво1е.104( test ("Значение указано") ); // Значение указано 


Следует учитывать, что значение по умолчанию вычисляется при каждом вызове 
функции, поэтому в этом примере каждый раз будет создаваться новый массив: 


function test(x, arr=[]) { 
arr.push (x); 
return arr; 
} 
console.log( test(2) ); // Array | 
console.log( test(5) ); // Array | 


21 
51 


3.10.9. Анонимные функции 


Функция может вообше не иметь названия. В этом случае ссылку на анонимную 
функцию сохраняют в переменной: 


var func = function() { // Присваиваем ссылку на анонимную функцию 
alert ("Сообщение"); 

}; 

Рорс(); // Вызываем анонимную функцию через переменную func 


Анонимная функция становится видимой только после описания. Если вызов функ- 
ции поместить перед описанием, то будет выведено сообщение об ошибке. При ис- 
пользовании обычных функций ошибки не будет. 


Ссылку на вложенную функцию можно вернуть в качестве значения в конструкции 
return. Чтобы вызвать вложенную функцию, круглые скобки указываются два раза: 


var func = function() { // Присваиваем ссылку на анонимную функцию 
return function() { // Возвращаем ссылку на вложенную функцию 
alert ("Это вложенная функция"); 
}; 
}; 
Ғопс() (); // Вызываем вложенную функцию через переменную func 


Используя анонимные функции, следует учитывать, что при указании внутри 
функции глобальной переменной будет сохранена ссылка на эту переменную, а не 
на ее значение: 


var x = 5; 
мас func = function() { 


return х; // Сохраняется ссылка, а не значение переменной х ! 
}; 
сопѕо1е.1од (Ёџпс()); // 5 
х = 10; // Изменили значение 
console.log (Ғипс()); // 10, а не 5 
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Анонимные функции захватывают переменные в родительской области видимости 
(это называется замыканием). Если анонимная функция объявлена внутри функции, 
то после выхода из функции область видимости сохраняется, и мы можем получить 
доступ к переменным, сушествовавшим в момент создания анонимной функции: 


function test() { 
var x = 10, y= 5; 
return function() { 
тесип х + у; 
}; 
} 
var func = test(); 
console.log (func()); // 15 


3.10.10. Стрелочные функции 


В последних версиях некоторых \еБ-браузеров доступны также стрелочные функ- 
ции, которые в других языках называются лямбда-выражениями. Объявление стре- 
лочной функции имеет следующие форматы: 


<Переменная> = <Параметр> => <Возврашаемое значение>; 
(І<Параметр 1>[, ..., <Параметр №1]]) => 


<Переменная> 
<Возврашаемое значение>; 


<Переменная> = ([<Параметр 1>[, ..., <Параметр К>11) => 1 
<Тело функции> 
[return <Возврашаемое значение>; | 

}; 


Стрелочные функции, так же как и анонимные функции, не имеют имени. Ссылка 
на функцию сохраняется в переменной. Чтобы вызвать функцию, нужно после 
имени переменной указать круглые скобки и внутри них значения. 


Вот пример стрелочной функции с одним параметром: 


var func = n => n * 2; 
console.log (func (5)); // 10 


Если тело функции состоит из одного выражения, то фигурные скобки можно не 
указывать. Результат вычисления этого выражения станет возврашаемым значени- 
ем. Если указаны фигурные скобки, то для возврата значения нужно использовать 
конструкцию return. Предыдуший пример можно записать так: 


var func = п => ( 
return n * 2; 
}; 
сопво1е.1оа(ТҒапс(5)); // 10 


Если функция принимает только один параметр, то круглые скобки можно не ука- 
зывать. В противном случае параметры записываются через запятую внутри круг- 
лых скобок: 
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маг func = (х, у) => х + y; 
сопво1е.1оа4(Ғапс(5, 7)); // 12 


Круглые скобки обязательно указываются при отсутствии параметров: 


var func = () => console.log ("Сообщение"); 
Еопс(); // Сообщение 


Стрелочные функции захватывают переменные в родительской области видимости. 
Если стрелочная функция объявлена внутри функции, то после выхода из функции 
область видимости сохраняется, и мы можем получить доступ к переменным, 
существовавшим в момент создания стрелочной функции: 


function test() { 
var x = 10, y= 5; 
return () => x + y; 


} 
var func = test(); 
console.log (func()); // 15 


В отличие от обычных функций, внутри стрелочных функций нет доступа K пере- 
менной arguments. Чтобы передать неопределенное количество параметров, нужно 
перед именем параметра вставить оператор «три точки»: 


var sum = (...агг) => { 

var z = 0; 

for (var i = 0; i < arr.length; i++) { 

z += arr[i]; 

} 

return z; 
}; 
сопво1е.1о4(вөша(5, 6, 7, 20)); // 38 
В отличие от анонимных функций, стрелочные функции сохраняют ссылку на ро- 
дительский указатель this: 


function test() { 


console.log (this); // Object { } 
var func1 = function() 1 
console.log (this); // Window 
н 
час func2 = () => console.log (this); // Object { } 
Еарс1 (); 
Ғопс2 (); 
} 
var obj = {}; 


беѕё.са11 (obj); 


Причем указание контекста в методах са11 () И арр1у() не изменяет значение указа- 
теля this. 
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3.10.11. Функции-генераторы 


В последних версиях некоторых \!еБ-браузеров доступны функции-генераторы. 
Функцией-генератором называется функция, которая может возвращать одно зна- 
чение из нескольких значений на каждой итерации. Приостановить выполнение 
функции и превратить функцию в генератор позволяет ключевое слово yield. В oT- 
личие от обычных функций, после ключевого слова function указывается символ 
звездочка (function*). В качестве примера напишем функцию, которая умножает 
элементы последовательности на указанное число (листинг 3.38). 


Листинг 3.38. Функции-генераторы 


function* test(x, у) { 
for (let i = 1; i <= x; i++) { 
yield i * y; 


} 

var obj = test (10, 2); 

for (let n of obj) { 
console.log (п); 

} 

obj = test(3, 2); 


console. log (obj .next ().value); // 2 
console.log (obj.next ().value); // 4 
console.log (obj .next ().value); // 6 
console.log (obj .next ().value); // undefined 


После вызова функции-генератора возвращается объект, поддерживающий итера- 
ции. На каждом шаге возвращается значение, после чего состояние генератора со- 
храняется. При следующем вызове функции выполнение возобновляется с места, на 
котором прервалось. Таким образом можно сгенерировать бесконечное число зна- 
чений (по одному на каждой итерации), не опасаясь превысить лимит оперативной 
памяти. 


Возврашаемый объект содержит метод next (), с помощью которого можно перейти 
к следующему значению. Объект, возвращаемый методом пех (), содержит два 
свойства: value (позволяет получить текущее значение) и done (содержит значение 
true, если больше нет значений, и false — в противном случае): 


obj = test(3, 2); 


console.log (05) .пехЕ()); // Object { value: 2, done: false } 
console.log (obj.next()); // Object { value: 4, done: false } 
console.log (obj.next()); // Object { value: 6, done: false } 
console.log (obj.next()); // Object { value: undefined, done: true } 


298 Гпава 3 


3.10.12. Рекурсия. Вычисление факториала 


Рекурсия — это возможность функции вызывать саму себя. С одной стороны, это 
удобно, с другой стороны, если не предусмотреть условие выхода, происходит за- 
цикливание. Типичным применением рекурсии является вычисление факториала 
числа (листинг 3.39). 


Листинг 3.39. Вычисление факториала 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 


<title>Beuncjenne þakropnaza</title> 
<script> 
function factorial (х) { 
rf (x <= 11 теспей 1% 
else return (x * factorial(x - 1)); 
} 
</script> 
</head> 
<body> 
<script> 
уаг 2; 
z = міпаои. рготрё ("Вычисление факториала\пВведите число", ""); 
if (27 ===1911.). $ 
document.write ("Вы нажали Отмена"); 
} 
else { 
var п = рагүвеіпе(2, 10); 
if (ізМаМ(п)) 1 
document.write ("Вы ввели не целое число"); 
) 
еізе { 
document.write ("Факториал числа " + z +" ="); 


document.write (factorial (п)); 


} 
</script> 
</body> 
</html> 


3.11. Классы и обьекты 


Объектно-ориентированное программирование (ООП) — это способ организации 
программы, позволяющий использовать один и тот же код многократно. Основным 
«кирпичиком» ООП является класс. Класс включает набор переменных (называе- 
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мых полями или свойствами класса) и функций для управления этими переменны- 
ми (называемых методами). В совокупности свойства и методы называются члена- 
ми класса. После создания класса его название становится новым типом данных. 


Следует заметить, что в JavaScript нет полноценной поддержки объектно-ориен- 
тированного программирования — такой, как в языках С++ или Java. 


3.11.1. Основные понятия 


Для использования методов и свойств класса необходимо создать экземиляр класса. 
Для этого используется оператор new — после него указывается имя класса, к KOTO- 
рому будет относиться созданный экземпляр. После имени класса, в круглых скоб- 
ках, можно передавать некоторые параметры, задавая таким образом начальные 
значения свойствам класса: 


<Экземпляр класса> = new <Имя класса> ( [<Параметры>]); 
Пример: 


var x = new Number (10); 
console.log (typeof x); // object 


При создании экземпляра класса ссылка (указатель) сохраняется в переменной. Mc- 
пользуя ссылку, можно обрашаться к свойствам и методам созданного экземпляра 
класса. 


При обращении к свойствам используется следующий формат: 


<Экземпляр класса>.<Имя свойства>; 


Обращение к методам осуществляется аналогично, только после имени метода не- 
обходимо указать круглые скобки: 


<Экземпляр класса>.<Имя метода> ( [<Параметры>]); 


В скобках часто указываются параметры метода: 


console.log (x.toString (10)); // 10 


Для обращения к свойствам и методам можно использовать квадратные скобки, 
внутри которых указывается имя в виде строки: 


сопзо1е. 104 (x["toString"] (10)); // 10 


3.11.2. Класс Object 


Создать новый объект можно с помощью встроенного класса Object (листинг 3.40). 


Листинг 3.40. Класс Object 


маг саг = new Орјесі (); 

саг.шоде1 = "ВАЗ-2109"; // Сохранили строку 

саг.уеаг = 2007; // Сохранили число 
car.getModel = function() { // Сохранили ссылку на функцию 
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return ЕҺіз.поде1; 
К 


// Вывод значений 


console.log (саг.тоде1); // ВАЗ-2109 
console.log (саг.уеаг); // 2007 
console.log (саг.деЕМоае1 ()); // ВАЗ-2109 


После создания объекта в переменной car сохраняется ссылка на него. Используя 
точечную нотацию, можно добавить свойство (переменную внутри объекта). В ка- 
честве значения свойства может быть указан любой тип данных: число, строка, 
массив или другой объект. Если в качестве значения указать ссылку на функцию, 
то такое свойство становится методом объекта, внутри которого доступен указатель 
(this) на текущий объект. 


Класс Object содержит метод toString (), который наследуется всеми классами. Он 
возвращает значение объекта в виде строки. Метод вызывается автоматически при 
использовании объекта в строковом контексте: 


console.log (car.toString()); // [object Object] 
console.log (саг + ""); // [object Object] 


Объектная переменная может содержать специальное значение null, которое озна- 
чает, что переменная не содержит объекта. Это значение удобно возвращать из 
функции при невозможности создать объект — например, в случае ошибки. 


3.11.3. Создание объекта с помощью фигурных скобок 


Создать объект можно также с помощью фигурных скобок (листинг 3.41). 


Листинг 3.41. Создание объекта с помощью фигурных скобок 


уаг саг = { 
model: "ВАЗ-2109", 
уеаг: 2007, 


getModel: function() 1 
return this.model; 


}; 
// Вывод значений 


console.log (car.model); // ВАЗ-2109 
console.log (саг.уеаг); // 2007 
console.log (саг.деЕМоае1 ()); // ВАЗ-2109 


В этом случае значение свойства указывается после двоеточия, а пары «свойст- 
во/значение» записываются через запятую. 


В последних версиях некоторых УУеһ-браузеров создать метод внутри фигурных 
скобок можно так: 
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маг саг = ( 
model: "ВАЗ-2109", 
year: 2007, 
де“Моде1() { 
return this.model; 


}; 


Если между фигурными скобками нет никаких инструкций, то создается пустой 
объект: 


маг obj = {}; // Пустой объект 
console.log (obj); // Object { } 


При создании объектов следует учитывать один очень важный момент. Например, 
нам необходимо определить два пустых объекта, которые в дальнейшем будут Ис- 
пользоваться раздельно. Очень силен соблазн написать следующим образом: 


var obj1 = орј2 = {}; // Якобы определили два объекта 


Проблема заключается в том, что в этом примере создается только один объект, а 
ссылка на него сохраняется в двух переменных. Таким образом, все изменения орј1 
будут отражаться и на переменной obj2: 


var obj1 = орј2 = {}; // Якобы определили два объекта 
obj1.test = "Это значение свойства test объекта орј1"; 
console.log (o0obj2.test); 

// Выведет: Это значение свойства test объекта obj1 


Помните, что присваивание и сравнение обьектов производится по ссылке, ане по 
значению. Поэтому создавать объекты необходимо раздельно: 

var ор31 = {}, орј2 = {}; 

obj1.test = "Это значение свойства test объекта орј1"; 

console.log (obj2.test); // Выведет: undefined 


3.11.4. Конструктор класса 


Если после ключевого слова new указана функция, то она становится конструкто- 
ром класса, которому можно передать начальные данные при инициализации (лис- 
тинг 3.42). Внутри конструктора доступен указатель (+515) на текущий объект. 


Листинг 3.42. Конструктор класса 


function Саг(ш, у) { // Конструктор класса 
this.model = m; 
this.year = y; 
this.getModel = function() { 
return this.model; 
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// Создание экземпляра 

var obj1 = new Саг ("ВАЗ-2109", 2007); 
var obj2 = new Саг ("ТАРА Granta", 2014); 
// Вывод значений 


console.log (obj1.year); // 2007 
console.log (obj1.getModel()); // ВАЗ-2109 
console.log (ору2.уеаг); // 2014 
console.log (obj2.getModel()); // LADA Granta 


С помощью конструктора класса можно создать множество объектов (экземпляров 
класса). При этом для каждого объекта создается свой набор локальных перемен- 
ных. Класс можно сравнить с чертежом, а объект — с изделием, произведенным 
по этому чертежу. Чертеж всегда один, а вот изделий может быть бесконечное 
множество. Причем каждое изделие уникально и не зависит от других изделий. 


3.11.5. Инструкция с/а55 


В последних версиях некоторых \МеБ-браузеров создать класс можно с помощью 
ключевого слова class: 


class <Имя класса>[ extends <Базовый класс>] ( 
// <Свойства и методы класса> 

} 

<Переменная> = с1аз5[ extends <Базовый класс>] { 
// <Свойства и методы класса» 


} 


Конструктор класса внутри инструкции с1азз определяется с помощью метода со 
специальным названием constructor (). Пример создания класса приведен в лис- 
тинге 3.43. 


Листинг 3.43. Инструкция class 


class Car { 
constructor (m, у) { // Конструктор класса 
this.model = m; 
this.year = y; 
} 
getModel() { 
return this.model; 


} 

// Создание экземпляра 

var obj1 = new Саг ("ВАЗ-2109", 2007); 
var орј2 = new Саг ("ТАРА Granta", 2014); 
// Вывод значений 

console.log (067)1.уеаг); // 2007 
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console.log (0531 .деЕМоае1 ()); // ВАЗ-2109 
console.log (obj2.year); // 2014 
console.log (obj2.getModel()); // LADA Granta 


Ключевое слово extends позволяет создать цепочку наследования. Наследование - 
это возможность создания производных классов на основе базового класса. При 
этом производный класс автоматически получает возможности базового класса и 
может добавить новую функциональность или переопределить некоторые методы. 
Пример создания иерархии классов приведен в листинге 3.44. 


Листинг 3.44. Наследование 


сіазз А ( 
сопвегисбов() { // Конструктор 
console. log ("Конструктор класса А"); 
| 
а оО: 
console.log ("Метод Ғіпсі() из класса А"); 


} 
class В extends А { 
сопѕёгисіёог () { // Конструктор 
super (); // Вызов конструктора базового класса 
console. log ("Конструктор класса В"); 
} 
Ғыпс1і() { 
зарег. Еапс1 (); // Вызов метода базового класса 
console.log ("Метод Ғіпсі() из класса В"); 
} 
Ғыпс2() { 
console.log ("Метод Ғіпс2() из класса В"); 


} 

var objB = new В(); 

// Конструктор класса А 

// Конструктор класса В 

objB.func2(); // Метод Ғіпс2() из класса В 
objB.func1(); 

// Метод Ғіпсі() из класса А 

// Метод Ғіпсі() из класса В 


В этом примере класс в наследует все члены класса А. Класс л называется базовым 
классом или суперклассом, а класс в — производным классом или подклассом. 


Конструктор в базовом классе автоматически не вызывается, если он был пере- 
определен в производном классе. Для передачи значений конструктору базового 
класса используется следующий синтаксис: 


super ( [<Значения>]); 


304 Гпава 3 


Чтобы переопределить метод базового класса, достаточно в производном классе 
создать одноименный метод. В этом случае будет вызван метод только из произ- 
водного класса. Чтобы вызвать метод из базового класса, внутри производного 
класса используется следующий синтаксис: 


зирег.<Имя метода> ( [<Значения>]); 


3.11.6. Свойства и методы класса 


Все рассмотренные ранее варианты позволяли создавать свойства и методы экзем- 
пляра класса. Тем не менее можно также создать свойства и методы, связанные 
с самим классом, а не с его экземпляром (листинг 3.45). 


Листинг 3.45. Свойства и методы класса 


function Car(m) { this.model = m; } 

Car.text = "Модель "; 

Car.showInfo = function(obj) { 
console.log (Саг.ЕехЕ + obj.model); 

}; 

var ор) = new Саг ("ВАЗ-2109"); 

// Вывод значений 

console.log (Car.text); // Модель 

Car.showInfo (obj); // Модель ВАЗ-2109 


Получить значение свойства и вызвать метод можно без создания экземпляра. При 
использовании инструкции class перед именем метода класса указывается ключе- 
вое слово static. Обратите внимание: внутри статических методов нет доступа 
к обычным свойствам и методам. Объект мы передаем в качестве параметра стати- 
ческого метода (листинг 3.46). 


Листинг 3.46. Статические методы 


class Сағ { 
cónstrřructor (т) { 
this.model = m; 
} 
static showInfo (obj) { 
console.log (obj.model); 


} 
var obj = new Car ("ВАЗ-2109"); 
Car.showInfo (obj); // ВАЗ-2109 
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3.11.7. Перебор свойств обьекта 


Как видно из листинга 3.42, чтобы обратиться к свойству, следует указать его 
название после точки. Доступ к методам осушествляется так же, но после имени 
метода необходимо указать круглые скобки. Кроме точечной нотации, к свойствам 
и методам можно обратиться как к элементам ассоциативного массива. В этом слу- 
чае название задается внутри квадратных скобок: 


var obj1 = new Саг ("ВАЗ-2109", 2007); 
console.log (0571 ["уеаг"]); // 2007 
console.log (©5791 ["деЕМоде1"] ()); // ВАЗ-2109 


Обратите внимание на то, что название указывается в виде строки, которую можно 
изменить внутри программы динамически. Это обстоятельство позволяет обратить- 
ся к свойствам, названия которых заранее неизвестны. Выведем названия всех 
перечислимых свойств и их значения с помощью цикла for. ..in (листинг 3.47). 


Листинг 3.47. Перебор свойств объекта 


function Car(m, у) { 
this.model = m; 
this.year = y; 
} 
var obj = new Саг("ВАЗ-2109", 2007); 
for (var prop in obj) { 
// Переменной prop на каждой итерации присваивается 
// название свойства объекта 


console.log(prop + " = " + ору [ргор]); 


Перебрать можно только перечислимые свойства, т. е. свойства, для которых метод 
propertyIsEnumerable() из класса Object вернул значение true. Для свойств встро- 
енных объектов метод возвращает false, поэтому перебрать свойства этих объектов 
с помощью цикла Гог... 1п нельзя: 


console.log (obj .propertyIsEnumerable ("model")); // true 
var x = new Number (10); 
console. log (x.propertyIsEnumerable ("toFixed")); // false 


3.11.8. Проверка сушествования свойств и методов 


Оператор in также позволяет проверить существование свойства (включая унасле- 
дованные) у объекта. Если свойство существует, то возвращается значение true: 


console.log ("model" іп obj); // true 
var y = new М№Мотрег (5); 
console.log ("toFixed" in у); // true 
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Проверить наличие не унаследованного свойства позволяет метод һазОмпРгорекеу(). 
В качестве значения указывается название свойства: 


console.log ("toString" іп obj); // true 
console.log (obj .hasOwnProperty ("toString")); // false 


Если название метода указать в условии без круглых скобок, то это позволит про- 
верить наличие метода: 


var z = new Мапрег (5); 
if (2.ЖоҒіхеа) console.log ("Метод определен"); 
else console.log ("Нет"); 


Обратите внимание на то, что проверять таким образом наличие свойства нельзя, 
т. к. значение 0 будет интерпретировано как false. 


С помощью оператора instanceof можно проверить принадлежность экземпляра 
какому-либо объекту: 


var К = new Numker (8); 

if ((СуреоЕ К == "object") && (К instanceof Numker)) 
console.log ("Экземпляр К принадлежит объекту Number"); 
else console.log ("Нет"); 


Удалить свойство позволяет оператор delete: 


console.log ("model" іп obj); // true 
delete obj.model; 
console.log ("model" in obj); // false 


3.11.9. Прототипы 


В предыдущих примерах мы определяли метод getModel () внутри конструктора: 


function Car(m, y) { // Конструктор класса 
this.model = m; 
this.year = y; 
this.getModel = function() { 
return this.model; 


} 


Подобное решение не является эффективным. Предположим, необходимо соста- 
вить массив, описывающий тысячу автомобилей. Свойства model и year В этом слу- 
чае будут содержать разные значения, а вот метод де<Моде1 () во всех этих объектах 
один и тот же, но создавать мы его будем тысячу раз. 


Использование прототипов позволяет определить метод вне конструктора. При 
создании объекта наследуются все свойства, которые имеются в прототипе. Таким 
образом, метод getModel (), определенный один раз, будет наследоваться всеми эк- 
земплярами. 


Для добавления метода в прототип используется свойство prototype (листинг 3.48). 
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Листинг 3.48. Прототипы 


function Сағ(ш, y) 1 
this.model = m; 
this.year = y; 
} 
Car.prototype.getModel = function() { 
return this.model; 
} 
// Создание экземпляров 
var obj1 = new Саг ("ВАЗ-2109", 2007); 
var obj2 = new Саг ("ТАРА Granta", 2014); 
// Вывод значений 


console.log (0671 .уеаг); // 2007 
console.log (0531 .деЕМоае1 ()); // ВАЗ-2109 
сопво1е.104(0р12.уеак); // 2014 
console.log (0572 .деЕМоае1 ()); // ТАРА Granta 


Как уже говорилось, свойства, определенные в прототипе, наследуются всеми 
экземплярами. Таким образом, метод getModel() доступен для перебора в цикле 
Гог... 10, а также успешно проверяется на наличие с помощью оператора іп. Тем не 
менее метод hasOwnProperty () позволяет определить, что метод является унаследо- 
ванным: 


console.log ("getModel" іп obj1); // «кие 
console.log (obj1.hasOwnProperty ("деЕМоде1")); // false 


Любой созданный объект автоматически наследует свойства класса Object. Напри- 
мер, при попытке вывести значение экземпляра в диалоговом окне, вызывается 
метод toString (), который должен возвращать значение в виде строки. Для приме- 
ра выведем текущее значение: 


var ор) = new Саг ("ВАЗ-2109", 2007); 
сопзо1е.1оа (05) + ""); 


В результате в консоли мы получим следующий результат: 

[object Object] 

С помошью прототипов можно переопределить этот метод таким образом, чтобы 
выводилось нужное нам значение: 


Car.prototype.toString = function() { 
return "Модель: " + this.model + " Год выпуска: " + this.year; 


} 
var obj = new Саг ("ВАЗ-2109", 2007); 
сопзо1е.1оа (05) + ""); 


В результате в диалоговом окне появится следующий результат: 


Модель: ВАЗ-2109 Год выпуска: 2007 
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При попытке выполнить арифметическую операцию вызывается метод уа1оео:(), 
который должен возвращать значение в виде числа (или другого элементарного 
типа). Для примера переопределим метод таким образом, чтобы он возвращал ко- 
личество «прожитых» автомобилем лет: 


Car.prototype.valueOf = function() { 
return (new Date ()).getFullYear() - this.year; 


} 
var obj = new Car ("BA3-2109", 2007); 
console.log (орј * 1); 


Практически все встроенные классы JavaScript (например: String, Array) имеют 
СВОЙСТВО prototype. С его помощью можно расширить возможности встроенных 
классов — например, добавить новый метод. В качестве примера добавим метод 
1пАггау() В класс Array. Этот метод будет производить поиск значения в массиве 
и возвращать индекс первого вхождения. Если вхождение не найдено, то метод 
вернет значение -1: 


Array.prototype.inArray = function(elem) 1 
for (var i = 0, len = this.length; i < len; i++) { 
if (this[i] === elem) return i; 
} 
return -1; 
} 
маг агг = | 1, 2, 3, 4, 5, 1 |; 
маг роз = arr.inArray (5); 
if (роз !- -1) console.log ("Индекс элемента " + роз); 
else сопѕо1Іе.1од ("Не найдено"); 


ПРИМЕЧАНИЕ 


Не рекомендуется расширять возможности встроенных классов, т. к. другие програм- 
мисты могут прийти в недоумение, увидев новый метод. 


3.11.10. Пространства имен 


Предположим, программист написал функцию с названием іпАғгау(). Через Heko- 
торое время ему потребовалось подключить библиотеку стороннего разработчика, 
в которой все функции объявлены в глобальной области видимости. Если в этой 
библиотеке объявлена функция с названием іплггау(), то возникнет конфликт 
имен. Следует заметить, что никакого сообщения об ошибке в таком случае выве- 
дено не будет, — функция, которая объявлена последней, просто переопределит 
уже существующую функцию. Далее все зависит от частоты использования функ- 
ции. Все инструкции, которые зависят от этой функции, станут работать некор- 
ректно. В итоге будет получен результат, который не планировался, или программа 
завершится с критической ошибкой. 


Чтобы избежать подобной ситуации, следует строго придерживаться концепции 
пространств имен. Согласно этой концепции, модуль может импортировать в гло- 
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бальную область ВИДИМОСТИ ТОЛЬКО ОДИН идентификатор. Следует заметить, что это 
требование касается не только модулей сторонних разработчиков, НО И ОТНОСИТСЯ 
к вашим собственным программам. 


В языке JavaScript в качестве пространства имен используются объекты. Создан- 
ный экземпляр помещается в глобальную область видимости, а остальные иденти- 
фикаторы доступны через свойства объекта: 


var myModule = {}; // Объявление пространства имен 
myModule.test = function() { 
console.log ("Это функция test"); 


myModule.inArray = function() { 
console.log ("Это функция іпАггау"); 


myModule. test (); 


myModule.inArray (); 


В этом примере функция inArray() расположена внутри пространства myModule, по- 
этому конфликт имен сводится к минимуму. Однако может возникнуть ситуация, 
когда пространства имен называются одинаково. В этом случае решением является 
создание вложенных объектов. Очень часто название пространства имен совпадает 
с названием сайта разработчика — в качестве основного объекта используется на- 
звание зоны, а вложенный объект носит название домена. Например, для сайта 
http://example.com/ создание пространства имен будет выглядеть так: 


var com; // Объявляем, иначе будет ошибка при проверке 
if (!соп) сом = {}; // Объявление пространства имен 
else if (typeof сом != "object") 

throw new Error ("Идентификатор сот не является объектом"); 
if (com.example) 

throw new Error ("Пространство имен уже занято"); 
com.example = ( // Объявление вложенного пространства имен 


test: function() 1 
сопво1е.1о4("Это функция test"); 
}, 
inArray: function() 1 
сопво1е.1о4("Это функция inArray"); 


}; 
com. example.test(); 
com. example.inArray (); 


Таким образом, если домен принадлежит вам, никакого конфликта имен не будет, 
но пользоваться таким длинным названием не очень удобно. Учитывая, что при- 
сваивание объектов производится по ссылке, а не по значению, эта проблема реша- 
ется просто — в программе определяется короткий идентификатор и в нем сохра- 
няется ссылка на объект: 
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var $ = соп.ехаштр1е; 
$.test(); 
$.inArray(); 


Кроме того, можно использовать анонимную функцию, B параметре которой yka- 
зывается короткий идентификатор, а при вызове функции передается ссылка на 
объект, являющийся пространством имен: 


(function($) 1 
5.Жезе(); 
5.іпАғтау(); 

}) (com. example) ; 


В этом примере идентификатор 5 будет доступен только внутри анонимной функ- 
ции, а так как функция не имеет названия, в глобальной области видимости ника- 
кой идентификатор не сохраняется. 


3.12. Обработка ошибок 


Сушествуют три типа ошибок в екриптах: синтаксические, логические и ошибки 
времени выполнения. 


3.12.1. Синтаксические ошибки 


Синтаксические -- это ошибки в имени оператора или функции, отсутствие закры- 
вающей или открывающей скобок и т. д. То есть ошибки в синтаксисе языка. Как 
правило, интерпретатор предупредит о наличии ошибки, а программа не будет 
выполняться совсем. 


Например, если вместо: 
document.write ("Строка"); 
написать (здесь нет закрывающей кавычки): 


document.write ("Строка); 


то Web-6pay3ep в окне консоли отобразит следующее сообщение: 


SyntaxError: unterminated string literal index.html:12:15 


Так Web-6paysep предупреждает нас, что существует синтаксическая ошибка. Ho- 
мер строки с ошибкой (12) и название файла (index.html) отображаются в правой 
части строки. Достаточно отсчитать 12 строк в исходном коде и добавить закры- 
вающую кавычку. А затем обновить страницу. 


Приведем часто встречающиеся синтаксические ошибки: 
С опечатка в имени оператора или функции; 
С буква набрана в русской раскладке клавиатуры вместо латинской; 


С неправильный регистр букв; 
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П отсутствие открывающей или закрывающей скобки (или, наоборот, лишние 
скобки); 


С в цикле for указаны параметры через запятую, а не через точку с запятой. 


3.12.2. Логические ошибки 


Логические ошибки — это ошибки в логике работы программы, которые можно вы- 
явить только по полученному результату. Такие ошибки весьма трудно выявить 
и исправить. Как правило, интерпретатор не предупреждает о наличии логической 
ошибки, и программа будет выполняться, т.к. не содержит синтаксических 
ошибок. 


Предположим, необходимо вывести первые три элемента массива. Программист, 
забыв, что нумерация массивов начинается с нуля, пишет следующий КОД: 


var arr = [1, 2, 3, 4]; 
for (var і = 1; 1 < 4; i++) сопзо1е.1оа(агк[1]); 


В итоге возникает логическая ошибка, поскольку будут получены не первые эле- 
менты массива, а три элемента, начиная со второго. Но так как в этом примере нет 
синтаксических ошибок, интерпретатор сочтет код правильным. 


Если в логическом выражении вместо оператора == (равно) указан оператор при- 
сваивания =, то это также приведет к логической ошибке: 


маг х = 5; 


iE- {3 6) сопзо1е.1о04("Переменная х равна 6"); 


else сопво1е.1о4("Переменная х не равна 6"); 


Этот код выведет совсем не то, что хотел программист: 


Переменная х равна 6 


3.12.3. Ошибки времени выполнения 


Ошибки времени выполнения — это ошибки, которые возникают во время работы 
екрипта. Причиной ЯВЛЯЮТСЯ события, не предусмотренные программистом. 


В некоторых языках (например, в РНР) ошибки времени выполнения возникают из- 
за деления на ноль или обрашения к несушествуюшему элементу массива. Но 
в языке JavaScript в этих случаях программа прервана не будет — при попытке 
деления на ноль возвращается значение Infinity ИЛИ Мам: 


сопво1е.104(5 / 0); // Infinity 
сопво1е.104(0 / 0); // NaN 


При обращении к несуществующему элементу массива возвращается значение 
undefined: 


vár агг = | 1, 2 1; 
console.log (arr[20]); // undefined 
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Очень часто ошибки времени выполнения возникают при использовании условий: 
var x = 6; 

1Е (х > 5) сопѕо1е.1од("х > 5"); 

else сопо1е.104(ж); // Строка с ошибкой ( сопо1е вместо console) 


В этом примере никакой ошибки не будет, пока соблюдается условие "х > 5". Как 
только условие перестанет выполняться, сразу возникнет ошибка, и выполнение 
программы будет прервано. 


3.12.4. Обработка ошибок 


Перехватить и обработать ошибки позволяет конструкция ху. . .саєсћ. Конструк- 
ция имеет следующий формат: 
try 1 


<Инструкции, в которых перехватываем ошибки> 


} 


[catch ([<Ссылка на объект Error>]) { 


<Обработка ошибки> 


}] 
[finally { 
<Инструкции, которые будут выполнены в любом случае> 


}] 


Инструкции, в которых могут возникнуть ошибки, размещаются в блоке try. Если 
внутри этого блока возникнет исключение, то управление будет передано в блок 
catch. В качестве параметра в блоке catch можно указать переменную, через KOTO- 
рую будет доступен объект Error, содержащий описание ошибки. Если в блоке try 
ошибки не возникло, то блок catch не выполняется. Если указан блок finally, ТО 
инструкции внутри этого блока будут выполнены независимо от того, возникла 
ошибка или нет. Блоки catch И finally не являются обязательными, но хотя бы 
один из них должен присутствовать: 


var x = 3; 
try ( 
if (x > 5) сопво1е.104("х > 5"); 
else сопо1е.1о4(х); // Строка с ошибкой 
} catch (е) { 
сопво1е.104("Возникла ошибка: " + е.папе + ": " + е.пеззаде); 
} finally { 
сопѕо1Іе.10од ("Сообщение будет выведено в любом случае"); 


} 


Результат в консоли при ошибке: 


Возникла ошибка: ReferenceError: сопо1е is not defined 
Сообшение будет выведено в любом случае 
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3.12.5. Оператор throw. Генерация исключений 


В некоторых случаях требуется не обрабатывать ошибку, а, наоборот, указать про- 
грамме, что возникла неисправимая ошибка, и прервать выполнение всей програм- 
мы или передать управление вышестоящему обработчику. Для этого предназначен 
оператор throw: 


маг х = -3; 
try { 
if (х < 0) 


throw new Error ("Переменная не может быть меньше нуля"); 
} catch (е) { 
сопво1е.104("Возникла ошибка: " + е.папе + ": " + е.пеззаде); 


3.12.6. Отладка программы в У/ер-браузере Firefox 


Как вы уже знаете, УҮер-браузер Firefox содержит панель Инструменты разработ- 
чика. В состав этого средства входит Веб-консоль, в которую выводятся различ- 
ные сообщения — например, при наличии ошибок в программе. Чтобы открыть эту 
консоль, переходим в главное меню и выбираем пункт Разработка | Веб-консоль 
или нажимаем комбинацию клавиш <Ctrl>+<Shift>+<K>. В результате отобразится 
содержимое вкладки Консоль. 


Консолью мы уже не раз пользовались при выводе результатов работы учебных 
примеров. Сейчас нас интересует вкладка Отладчик. Так что переходим в главное 
меню и выбираем пункт Разработка | Отладчик или нажимаем комбинацию кла- 
виш <Ctrl>+<Shift>+<S>. 


е Инструменты разработчика - Отладка программы - file:///C:/book/test.html - 0 x 
[я O Инспекто 67 Консол ДЕТТІ {} Стили © Профайле = Сет. В Хранилиш <> ром БІ" В Е = но 
eI test.html x р уу 2 (9 

1 <!DOCTYPE html Выражения для отслеживания Q 

2 <html lang= 

3 <head> Точки останова М! 

4 <meta charset="utf-8"> 

<+ії1е>отладка nporpamma</title> МІ test.html: 10 

5 </head> ғ 

7 <body> 

асе МІ test.html: 14 

9 function +еѕ+() { = 
| то return -3; v] test.html: 19 

11 } 

12 Стек вызовов 

13 маг х; 
ED: = test(); Области 

15 try { 

16 if (х < Ө Блокировать 

Еггог еременн не т ть меньше H 
возникла ошибка + е.паме + + e.message); есі) 
х-5 
</script> 
22 </body> [default properties] 
23 </html> Р 
—proto_: WindowPrototype 


Рис. 3.1. Пошаговое выполнение программы Ha вкладке Отладчик 
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Вкладка Отладчик является полноценным отладчиком скриптов на JavaScript. На 
этой вкладке существует возможность выполнять программу по шагам, отслеживая 
значения различных переменных, — это очень удобное средство для поиска оши- 
бок в программе, особенно логических. Вначале нужно установить точки остано- 
ва — для чего следует щелкнуть мышью напротив нужной строки на нумерации 
строк. Теперь после обновления \!еБ-страницы программа прервется на отмечен- 
ной строке (рис. 3.1). В этот момент можно посмотреть текущие значения перемен- 
ных, а также продолжить выполнение скрипта по шагам. Так можно полностью 
контролировать весь процесс выполнения программы. Пользуйтесь отладкой при 
возникновении любой ошибки, и вы очень быстро ее найдете и исправите. 


3.13. События 


При взаимодействии пользователя с \еБ-страницей происходят события. Собы- 
тия — это своего рода извещения системы о том, что пользователь выполнил ка- 
кое-либо действие, или внутри самой системы возникло некоторое условие. Собы- 
тия возникают при щелчке на элементе, перемещении мыши, нажатии клавиши на 
клавиатуре, изменении размеров окна, окончании загрузки УУеВ-страницы ит. д. 


3.13.1. Назначение обработчиков событий 


Зная, какие события может генерировать тот или иной элемент \еБ-страницы, 
можно написать функцию ДЛЯ обработки этого события. Например, при отправке 
данных формы возникает событие onsubmit. При наступлении этого события можно 
проверить данные, введенные пользователем, и, если они не соответствуют ожи- 
даемым, прервать отправку данных. 


Назначить обработчик события можно несколькими способами. Первый способ 
заключается в добавлении к тегам параметров с названиями событий. В качестве 
значений параметров указывается выражение или вызов функции. 


Вот пример назначения обработчика нажатия кнопки: 


<input type="button" уа1ае="Кнопка 1" onclick="handler1 () "> 


При нажатии кнопки будет вызвана функция handler1 (). 


Второй способ подразумевает использование свойств элементов. Причем тут воз- 
можны два варианта: с помощью анонимной функции или ссылки на функцию: 


document .getElementById("btn2").onclick = function() 1 
console.log ("Нажата кнопка 2"); 

}; 

document .getElementById("btn3").onclick = handler2; 


Чтобы получить доступ к свойствам элемента, нужно вначале получить ссылку на 
сам элемент с помощью метода getElementById () объекта document. В качестве зна- 
чения метод принимает строку с идентификатором элемента. Далее указывается 
название события, которое совпадает с названием параметра тега. После операто- 
ра = задается анонимная функция или ссылка на функцию. Обратите внимание: при 
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указании ссылки название функции указывается без круглых скобок. Если круглые 
скобки указать, то функция будет вызвана, и результат ее работы станет значением 
свойства. 


Описанные два способа позволяют назначить только один обработчик. Попытка 
присвоить другое значение свойству приведет к удалению имеющегося обработчи- 
ка. Третий способ лишен этого недостатка. Назначить обработчик события позво- 
ляет метод addEventListener (). Формат метода: 


addEventListener (<Событие>, <Ссылка на функцию>[, <Фаза>]); 


В параметре <событие> указывается название события в виде строки без префикса 
оп — например, click вместо onclick. Ссылка на функцию-обработчик указывается 
во втором параметре. В эту функцию в качестве параметра передается ссылка 
на объект event, а внутри функции через ключевое слово this доступна ссылка на 
текущий элемент. Описание параметра <Фаза> см. в разд. 3.13.7. 


Пример назначения обработчиков различными способами приведен в листин- 
ге 3.49. 


Листинг 3.49. Назначение обработчиков событий 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 


<title>HasHauenne обработчиков событий</Е1Е1е> 

</head> 

<body> 

<input type="button" value="KHonka 1" onclick="handler1 ()"> 
<input type="button" value="KHonka 2" id="btn2"> 

<input type="button" value="KHonka 3" id="btn3"> 

<input type="button" value="KHonka 4" id="btn4"> 

<script> 
function handler1() { 
console. log ("Нажата кнопка 1"); 


function handler2() { 
console.log ("Haxara кнопка 3"); 


function handler3 (e) { 
сопво1е.104("Нажата кнопка 4. handler3()"); 


function handler4 (e) { 
console. log ("Нажата кнопка 4. handler4()"); 


document .getElementById("btn2").onclick = function() 1 


console.log ("Haxara кнопка 2"); 
}; 
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// Название функции указывается без круглых скобок 
document .getElementById("btn3").onclick = handler2; 
// Можно назначить сразу несколько обработчиков 
var btn4 = досиотепі .деёЕ1 емепЕВутІа ("оёп4"); 
btn4.addEventListener ("сІіск", handler3); 
btn4.addEventListener ("click", handler4); 

</script> 

</body> 

</html> 


ПРИМЕЧАНИЕ 


В старых версиях браузера Internet Explorer метод addEventListener() не работает. 
Вместо него нужно использовать метод attachEvent(). А удаление обработчика осу- 
ществляется с помощью метода detachEvent (). 


3.13.2. Удаление обработчиков 


Если обработчик назначался через параметр тега или свойство, то для удаления об- 
работчика нужно присвоить свойству значение null, пустую строку или пустую 
анонимную функцию (последний способ работает во всех \еБ-браузерах): 


document .getElementById("btn2").onclick = function() {}; 


Если обработчик назначался через метод addEventListener (), ТО удалить его можно 
с помощью метода removeEventListener (). Формат метода: 


removeEventListener (<Событие>, <Ссылка на функцию>[, <Фаза>]); 


Обратите внимание: нужно обязательно иметь ссылку на обработчик, назначенный 
с помощью метода addEventListener (): 


document .getElementById ("btn4") .removeEventListener ("с11сКк", handler3); 


Если при назначении обработчика использовалась анонимная функция, то удалить 
обработчик будет нельзя. 


3.13.3. Указатель this 


При назначении обработчика с помощью свойства или метода addEventListener (), 
внутри обработчика будет доступна ссылка на текущий элемент через указатель 
this. С помощью этого указателя можно получить доступ к свойствам элемента. 
Если обработчик назначается через параметр тега, то указатель нужно передать 
в качестве параметра. Получим текст на кнопке по ее нажатию (листинг 3.50). 


Листинг 3.50. Указатель this 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
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<ііё1е>Указатель this</title> 
</head> 
<body> 
<input type="button" value="KHonka 1" onclick="handler1 (this)"> 
<input type="button" value="KHonka 2" id="btn2"> 
<input type="button" value="KHonka 3" id="btn3"> 
<script> 
function handler1 (elem) { 


console.log ("Нажата кнопка + elem.value); 


} 
function handler2 (event) { 


console.log ("Нажата кнопка + this.value); 


} 
document .getElementById("btn2").onclick = function (event) { 


console.log ("Нажата кнопка + this.value); 


}; 
var btn3 = document.getElementById("btn3"); 
btn3.addEventListener ("click", handler2); 
</script> 

</body> 

</html> 


3.13.4. Обьект event 


Объект event позволяет получить детальную информацию о произошедшем собы- 
тии и выполнить необходимые действия. Объект event доступен только в обработ- 
чиках событий. При наступлении следующего события все предыдущие значения 
свойств сбрасываются. 


При назначении обработчика с помощью метода addEventListener() или свойства 
объект event будет доступен через первый параметр. Если обработчик назначается 
через параметр тега, то объект нужно передать в обработчик в качестве параметра. 


Объект event имеет следующие основные свойства: 


С type — строка, содержащая тип события. Возвращается в нижнем регистре и без 
префикса оп. Например, при событии onclick свойство type равно click; 


П target — ссылка на элемент, который является источником события (в старых 
версиях браузера Internet Explorer используется свойство srcElement); 


П currentTarget — возвращает ссылку на элемент, в котором обрабатывается CO- 
бытие. Ссылается на тот же элемент, что и ключевое слово this внутри обработ- 
чика события. Значение свойства currentTarget может не совпадать со значени- 
ем свойства target; 


п timeStamp -- время возникновения события в миллисекундах. 


Благодаря объекту event, мы можем назначить один обработчик сразу для несколь- 
ких элементов и даже для нескольких типов событий. В листинге 3.51 приведен 
пример обработки нажатия кнопок внутри одного обработчика. 
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Листинг 3.51. Обьект event 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<ііё1е>Объект event</title> 
</head> 
<body> 
<input type="button" value="KHonka 1" onclick="handler (event)"> 


<input type="button" value="KHonka 2" id="btn2"> 
<input type="button" value="KHonka 3" id="btn3"> 
<script> 

function handler (event) { 


console. log (event.type); 
console. log (event.target.value); 


( 

console.log (event.currentTarget.value); 
console.log (event.timeStamp); 

} 

document .getElementById("btn2").onclick = handler; 
var btn3 = document .getElementById("btn3"); 
btn3.addEventListener ("click", handler); 
</script> 

</body> 

</html> 


3.13.5. Действия по умолчанию и их отмена 


Для многих событий назначены действия по умолчанию, т. е. действия, которые 
\еБ-браузер выполняет в ответ на возникшие в документе события. Например, при 
щелчке на гиперссылке действием по умолчанию будет переход по указанному 
ОКІ-адресу, нажатие кнопки Отправить приводит к отправке данных формы 
ИТ. д. 


Иногда действия по умолчанию необходимо прервать. Например, при отправке 
данных формы можно проверить их на соответствие ожидаемым и, если они не со- 
ответствуют, прервать отправку. Для этого используются следующие свойства 
и методы объекта event: 


O cancelable — содержит true, если действие по умолчанию может быть отмене- 
НО, И false — В противном случае; 


С preventDefault () — отменяет действие по умолчанию, если его можно отменить. 
В браузере Internet Explorer для отмены служит свойство returnValue, которому 
нужно присвоить значение false; 


О defaultPrevented — содержит true, если действие по умолчанию для текущего 
события было отменено в этом или предыдущем обработчике, и false — в про- 
тивном случае. 
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Для отмены действия по умолчанию можно также внутри обработчика вернуть зна- 
чение false. 


В листинге 3.52 приведен пример проверки правильности ввода E-mail и прерыва- 
ния перехода по гиперссылке. 


Листинг 3.52. Прерывание действий по умолчанию 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 


<Е151е>Прерывание действий по ymonuanno</title> 


<script> 


function testEmail() { 
var p = /^[a-z0-9_.-]+ę@([a-z0-9-]+\.)+[a-z]{2,6}$/i; 
// Получаем значение поля email 


var email = document.getElementById ("ета11") .уа1ае; 
if (p.test(email)) { 
if (м1раом.сорЕ1 ги ("Отправить данные формы?")) 1 


return true; // Отправляем 


else return false; // Прерываем 


} 


еізе { 


alert ("E-mail введен неправильно"); 
return false; // Прерываем 


) 
function handler (е) 1 
е = е || window.event; 
if (e.preventDefault) e.preventDefault (); 
else e.returnValue = false; 
а1еге("Перехода по ссылке не будет!"); 
) 
</script> 
</head> 
<body> 
<form action="file.php" method="GET" onsubmit="return testEmail()"> 
<div> 
E-mail:<br> 
<input type="text" name="email" id="email"><br> 


<input type="submit" уа1ае="Отправить"> 
</div> 

</form> 

<p> 

<a href="file.html" 
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onclick="alert ('Перехода по ссылке не будет!'); return false"> 
Нажмите для перехода по ссылке</а><рг><рг> 

<a href="file.html" onclick="handler (еуепі) "> 
Нажмите для перехода по ссылке</а> 

</р> 

</body> 

</html> 


В этом примере рассмотрены два способа прерывания действия по умолчанию: 
В первой ссылке прерывание действия по умолчанию осуществляется возвратом 
значения false, а во второй — с помощью свойств и методов объекта event. 


3.13.6. Всплывание событий 


Что же такое всплывание событий? Давайте рассмотрим следующий пример (лис- 
тинг 3.53). 


Листинг 3.53. Всплывание событий 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 


<title>BcnmmBanne событий</+іё1е> 
<script> 
function showMsg (msg) { 


var div1 = document.getElementById("div1"); 
аіу1.іппегнНтТмі += msg + "<br>"; 


} 

</script> 

</head> 

<body onclick="showMsg ("Событие onclick - Документ") "> 


<р onclick="showMsg ("Событие onclick - Абзац") "> 
Шелкните мышью 
<span style="color: red" onclick="showMsg ("Событие onclick - 5РАМ") "> 


здесь</зрап> 

</р> 

<div id="div1"></div> 
</body> 

</html> 


В этом примере мы написали обработчики события onclick ДЛЯ Трех элементов 
страницы: тела документа, абзаца и тега <span>. Попробуем щелкнуть левой KHON- 
кой мыши на слове здесь — вместо одного события onclick мы получим целую 
последовательность событий: 
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Событие onclick - SPAN 
Событие onclick - Абзац 


Событие onclick - Документ 


Иными словами, событие onclick последовательно передается элементу-родителю. 
Для тега <span> элементом-родителем является абзац. А для абзаца элементом- 
родителем является само тело документа. Такое прохождение событий и называет- 
ся их всплыванием. 


Управлять всплыванием события позволяют следующие свойства и методы объекта 
event: 


O bubbles — содержит true, если текушее событие может всплывать, И false — 
в противном случае; 


С stopPropagation() — прерывает всплывание события. В браузере Internet 
Explorer для прерывания используется свойство cancelBubble объекта event, KO- 
торому нужно присвоить значение true. 


Продемонстрируем прерывание всплывания события на примере (листинг 3.54). 


Листинг 3.54. Прерывание всплывания события 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 


<title>llpephBaHnne всплывания события</%Ч1%1е> 
<script> 
function showMsg (e, msg) { 
var div1 = document .деіЕ1етепіВутІа ("діу1"); 
аіу1.іппегнНтТмі += msg + "<br>"; 
е = е || window.event; 
if (е.ѕіорРгорадаііоп) е.ѕіорРгорадаііоп (); 
TS .cancelBubble = true; 


} 

</script> 

</head> 

<body onclick="showMsg (event, 'Событие onclick - Документ") "> 
<р onclick="showMsg (event, "Событие onclick - Абзац")"> 


Шелкните мышью 
<span style="color: req" 
onclick="showMsg (event, 'Событие onclick - 5РАМ") ">здесь</ѕрап> 
</р> 
<div id="div1"></div> 
</body> 
</html> 


Попробуем теперь шелкнуть левой кнопкой мыши на слове здесь-- вместо трех 
событий мы получим только одно: 


Событие onclick - SPAN 
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3.13.7. Фазы событий 


Помимо фазы всплывания события существует также фаза перехвата события. 
Эта фаза не работает в старых версиях браузера Internet Explorer, поэтому исполь- 
зуется редко. Узнать текущую фазу позволяет свойство еуеперһаве объекта event. 
Оно может содержать следующие значения: 


С 1 — событие было перехвачено у вложенного элемента; 


С 2 — событие в настоящий момент обрабатывается в том же элементе, в котором 
И ВОЗНИКЛО; 


О з — событие всплыло из вложенного элемента. 


При изучении метода addEventListener() мы оставили без внимания параметр 
<Фаза>. Чтобы понять смысл этого параметра, рассмотрим пример (листинг 3.55). 


Листинг 3.55. Фазы событий 


<!DOCTYPE html> 

<html lang="ru"> 

<head> 
<meta charset="utf-8"> 
<title>ĝassı событий</11е> 

</head> 

<body> 

<div><span id="span1">span1 


<span іа="ѕрап2">Щелкните здесь (span2)</span></span> 
</div> 
<script> 
function handler (е) { 
сопво1е.1о4("Элемент " + this.id + 
". Событие возникло B " + e.target.id); 


console.log (е.еуепіРһаѕе); 


if (document .addEventListener) ( 
var ѕрап1 = document.getElementById ("span1"); 


var span2 = document.getElementById ("ѕрап2"); 


span1.addEventListener ("click", handler, true); 


span2.addEventListener ("click", handler, false); 


} 
</script> 
</body> 
</html> 


При щелчке на ссылке Щелкните здесь возникнет последовательность событий: 


Элемент зрап1. Событие возникло в врап2 
Элемент врап2. Событие возникло в зрап2 
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Таким образом, событие, возникшее во вложенном элементе, вначале обрабатыва- 
ется элементом-родителем, а затем самим элементом. Если заменить true на false, 
то последовательность будет другой: 


Элемент врап2. Событие возникло в зрап2 
Элемент зрап1. Событие возникло в врап2 


Это нормальная последовательность всплывания событий, которую мы рассматри- 
вали в разд. 3.13.6. Именно значение false используется в большинстве случаев. 


3.13.8. События документа 


Приведем основные события документа: 


С onloaa— после полной загрузки \еБ-страницы. Внутри обработчика этого 
события можно обращаться ко всем элементам из скрипта и назначать обработ- 
чики событий для элементов страницы: 


window.onload = function() { 
// Здесь назначаем обработчики событий для элементов 
}; 


С onscroll — при прокручивании содержимого элемента страницы, документа, 
окна или фрейма; 
П onresize — при изменении размеров окна; 


П onbeforeunload — перед выгрузкой документа. Если внутри обработчика вернуть 
строку, то \МеБ-браузер выведет окно, в котором пользователю будет предложе- 
но остаться; 


П onunload — непосредственно перед выгрузкой документа. Генерируется после 
события onbeforeunload; 


П onbeforeprint — перед распечаткой документа или вывода его на предваритель- 
ный просмотр; 


С onafterprint — после распечатки документа или вывода его на предваритель- 
ный просмотр. 


Пример обработки событий документа приведен в листинге 3.56. 


Листинг 3.56. События документа 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 


<Е1Е1е>События mokymeHnTa</title> 
<script> 
function showMsg (event, msg) { 


var div1 = document .getElementById("div1"); 
div1l1.innerHTML += msg + "<br>"; 
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console.log (event); 
} 
window.onbeforeunload = function() { 
return "Вы действительно хотите уйти?"; 
}; 
</script> 
</head> 
<body onload="showMsg (event, "Событие onload')" 
onscroll="showMsg (event, "Событие onscroll')" 
onresize="showMsg (event, "Событие onresize')" 
onbeforeprint="showMsg (event, "Событие onbeforeprint')" 
onafterprint="showMsg (event, "Событие onafterprint')"> 
<div id="div1"></div> 
<p><a ҺгеЁ="беѕі. Һи] ">Ссылка</а></р> 
<div style="height: 600рх"></4іу> 
</body> 
</html> 


Попробуйте перейти по ссылке или закрыть окно УУеВ-браузера — откроется окно 
с запросом. Событие onbeforeunload, возникающее перед выгрузкой документа, 
позволяет вывести стандартное диалоговое окно с двумя кнопками. Окно может 
содержать текст, возвращенный из обработчика, но большинство У/еһ-браузеров 
выводит стандартное сообщение. 


3.13.9. События мыши 


Приведем основные события мыши: 


П onmousedown — при нажатии кнопки мыши на элементе УУер-страницы или самой 
странице; 


onmouseup — при отпускании ранее нажатой кнопки мыши; 
onclick — при щелчке мыши на элементе или на №Међ-странице; 
ondblclick — при двойном щелчке мыши; 

onmousemove — при любом перемещении мыши; 

onmouseover — при наведении курсора мыши на элемент; 
onmouseout — при выведении курсора мыши с элемента; 


опзе1есЕ — при выделении элемента; 


пачааоаоаа 


oncontextmenu — При нажатии правой кнопки мыши для вывода контекстного 
меню; 


O опчһее1 — при вращении колесика мыши. В старых Web-6paysepax используется 
событие onmousewheel. 


События возникают последовательно — например, последовательность событий 
при нажатии кнопки мыши на элементе страницы будет такой: 
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onmousedown 
onmouseup 
onclick 


А при двойном нажатий — такой: 


onmousedown 
onmouseup 
onclick 
ondblclick 


ƏTO значит, что событие ondblclick возникает после события onclick. 


Продемонстрируем обработку событий мыши на примере (листинг 3.57). 
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Листинг 3.57. События мыши 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<title>Co6nTna мыши</&1Е1е> 
<script> 


function showMsg (event, msg) { 
var div1 = document .getElementById("div1"); 
аіу1.іппегнНтТмі += msg + "<br>"; 
console.log (event); 


} 

</script> 

</head> 

<body onmousedown="showMsg (event, 'Событие onmousedown')" 
onmouseup="showMsg (event, 'Событие onmouseup')" 
onclick="showMsg (event, 'Событие onclick')" 
ondblclick="showMsg (event, "Событие ondblclick')" 
oncontextmenu="showMsg (event, "Событие oncontextmenu')"> 

<p onmouseover=" showMsg (event, "Событие onmouseover')" 

onmouseout="showMsg (event, "Событие onmouseout! )"> 

Шелкните мышью в любом месте страницы 

</р> 

<div id="div1"></div> 

<div style="height: 600px"></div> 

</body> 

</html> 


Получить информацию о событии позволяют следующие свойства: 


O clientX и clientY — координаты события (по осям хи Y) в клиентских коорди- 


натах; 


П радех и радеу — координаты события (по осям X и У) относительно левого верх- 


него угла страницы; 


o 


o 
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offsetX И offsetY — координаты события (по осям X и Y) относительно контей- 
нера; 


button — число, указывающее нажатую кнопку мыши. Может принимать сле- 
дующие значения (в старых версиях браузера Internet Explorer используются 
другие значения): 


е 0 — нажата левая кнопка мыши; 
е 1 — нажата средняя кнопка; 
èe 2-- нажата правая кнопка мыши; 


relatedTarget — для события onmouseover содержит ссылку на элемент, с KOTO- 
poro переместился курсор мыши. Для события onmouseout содержит ссылку на 
элемент, на который пользователь перемещает курсор мыши (в браузере Internet 
Explorer используются свойства fromElement И ЕоЕ1етепе); 


detail — ДЛЯ событий onclick, onmousedown И оппоизеир возвращает количество 
выполненных щелчков мышью; 


deltax, deltaY И ае1$ ай — позволяют определить направление вращения колеси- 
ка мыши при событии опчһее1. 


3.13.10. События клавиатуры 


Приведем события клавиатуры: 


o onkeydown — При нажатии клавиши Ha клавиатуре; 


п опКеүргезв — аналогично событию опКкеуаоут, НО генерируется только для CHM- 


вольных клавиш; 


п опкеуир — при отпускании ранее нажатой клавиши клавиатуры. 


При нажатии клавиши на клавиатуре последовательность будет такой: 


onkeydown 


onkeypress 


onkeyup 


Продемонстрируем обработку событий клавиатуры на примере (листинг 3.58). 


Листинг 3.58. События клавиатуры 


<!DOCTYPE html> 
<html lang="ru"> 


<head> 


<meta charset="utf-8"> 
<title>CoősTna клавиатуры</Е1Е1е> 
<script> 


function showMsg (event, msg) { 


var div1 = document .getElementById("div1"); 
аіу1.іппегнНтТмІ += msg + "<br>"; 
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} 


console. log (event); 


</script> 
</head> 
<body onkeydown="showMsg (event, 'Событие onkeydown')" 


onkeypress="showMsg (event, "Событие onkeypress')" 
onkeyup="showMsg (event, "Событие опКеуир')"> 


<р>Нажмите клавишу на клавиатуре</р> 
<div id="div1"></div> 

</body> 

</html> 


Получить информацию о событии позволяют следующие свойства: 


o 
0 


иоооо 


кеу — строка с буквой или описанием клавиши (например, "ArrowDown"); 


keyCode — код нажатой клавиши. В \е-браузере Firefox при нажатии обычной 
клавиши в обработчике события опкеуртезз СВОЙСТВО keyCode имеет значение 0, 
а код символа доступен через свойство charCode. Если нажата только функцио- 
нальная клавиша, то ситуация другая — свойство charCode имеет значение 0, 
а код символа доступен через свойство кеусоде; 


location — позволяет определить, на какой клавиатуре была нажата клавиша: 
e 0 — на обычной клавиатуре; 

 1-- функциональная клавиша (например, <Ctrl>) нажата слева; 

e 2 — функциональная клавиша (например, <Ctrl>) нажата справа; 

е з — на цифровой клавиатуре; 

repeat — true, если клавиша удерживается нажатой; 

$51 ЕЕКеу — true, если была нажата клавиша <Shift>; 

ctrlKey — true, если была нажата клавиша <Ctrl>; 

а1ЕКеу — true, если была нажата клавиша <AI>; 


metaKey — true, если была нажата клавиша <Меа>. 


3.13.11. События формы 


Приведем основные события формы: 


o 
o 
o 
o 


onsubmit — при отправке данных формы; 
onreset — при очистке формы; 
onfocus — при получении фокуса элементом формы; 


опсһапде — При изменении данных в текстовом поле и перемещении фокуса 
на другой элемент формы либо при отправке данных формы (наступает перед 
событием onblur); 


onblur — при потере фокуса элементом формы; 
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п oninput — периодически возникает в процессе ввода данных в поле ввода или 
в область редактирования; 


П oninvalid — возникает, например, если не заполнено обязательное поле. 


Продемонстрируем обработку событий формы на примере (листинг 3.59). 


Листинг 3.59. События формы 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<Е1Е1е>События þopmK/title> 
<script> 


function showMsg (event, msg) { 


var div1 = document .деіЕ1етепіВута ("діу1"); 
аіу1.іппегнНтТмі += msg + "<br>"; 
console. log (event); 


} 

</script> 

</head> 

<body> 

<form action="file.php" method="GET" 


onsubmit="showMsg (event, "Событие onsubmit'); return false" 
onreset="showMsg (event, "Событие onreset')"> 
<div> 
Логин: <br> 
<input type="text" name="login" 
onfocus="showMsg (event, 'Событие onfocus')" 
onblur="showMsg (event, "Событие onblur')" 
onchange="showMsg (event, "Событие опсһапде")" 
oninput="showMsg (event, 'Событие oninput')"><br> 
E-mail:<br> 


<input type="text" name="email" required 

oninvalid="showMsg (event, 'Событие oninvalid')"><br> 
Описание : <br> 
<textarea name="descr" rows="10" cols="15"></textarea><br> 


<input type="reset" уа1ае="Очистить"> 
<input type="submit" уа1ае="Отправить"> 
</div> 

</form> 

<div id="div1"></div> 

</body> 

</html> 


Нужно еше раз напомнить, что примеры эти написаны только для браузера Firefox. 
Например, в \!еБ-браузере Internet Explorer половина приведенных свойств не 
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работает. Поэтому для написания скриптов, которые будут правильно работать во 
всех \!еБ-браузерах, приходится писать код под каждый УУер-браузер отдельно. 
Также нужно учитывать и версию Меб-браузера. 


3.14. Обьектная модель документа (РОМ) 


Объектная модель документа — это совокупность объектов, обеспечивающих 
доступ к содержимому \УеБ-страницы и ряду функций \!еБ-браузера. Доступ 
к объектам позволяет управлять содержимым У/еВ-страницы уже после ее загрузки. 


3.14.1. Структура объектной модели 


Объектная модель представлена в виде иерархии объектов. То есть имеется объект 
верхнего уровня и подчиненные ему объекты. В свою очередь, подчиненные объек- 
ты имеют свои подчиненные объекты. Кроме того, все объекты имеют свойства, а 
некоторые еще и методы. 


Часто объект верхнего уровня (и даже подчиненный объект) можно не указывать. 
Давайте в качестве примера рассмотрим инструкцию для вызова диалогового окна 
с сообщением. Это окно мы не раз использовали для вывода результата работы 
скрипта: 


window.alert ("Сообщение") ; 


Здесь window — это объект самого верхнего уровня, представляющий непосредст- 
венно УҮер-браузер, а alert () — это метод объекта window. В этом случае указывать 
объект не обязательно, т. к. объект window подразумевается по умолчанию: 


alert ("Сообщение"); 


Кстати, мы не раз опускали упоминание объекта верхнего уровня. Например, при 
печати сообщения в окне Међ-браузера: 


document.write ("Сообщение") ; 


Поскольку объект document является подчиненным объекту window, ТО нужно было 
бы написать так: 


window.document .write ("Сообщение"); 


Помимо уже упомянутого объекта самого высокого уровня — window — В объект- 
ной модели имеются следующие основные объекты: 


O frames — коллекция фреймов (см. разд. 3. 14.3); 
O navigator — содержит информацию о \еБ-браузере (см. разд. 3. 14.4); 


С ѕсгееп — служит для доступа к характеристикам экрана компьютера пользова- 
теля (см. разд. 3.14.5); 


П location — содержит ОКІ-адрес текущей \!еБ-страницы (см. разд. 3.14.6); 


П history — предоставляет доступ к списку истории \\еБ-браузера (см. разд. 3.14.7); 


o 
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document — служит для доступа к структуре и содержанию документа: 
e forms — коллекция всех форм; 

e images — коллекция всех изображений; 

e links — коллекция ссылок; 


ө scripts — коллекция скриптов. 


3.14.2. Обьект window 


Объект window — это объект самого верхнего уровня, представляющий окно Web- 
браузера. Объект чіпаоч подразумевается по умолчанию, поэтому указывать ссылку 
на этот объект не обязательно. 


Свойства объекта window: 


o 


пачааша 


o 


statüs:— сообшение, отображаемое в строке состояния: 


window.status = "Текст в строке состояния"; 


screenX — Горизонтальная координата левого верхнего угла окна; 
зсгеепу — вертикальная координата левого верхнего угла окна; 
outerWidth — полная ширина окна в пикселах; 

outerHeight — полная высота окна в пикселах; 

innerWidth — ширина содержимого окна в пикселах; 


innerHeight — высота содержимого окна в пикселах. Размер не включает высоту 
строки меню и панели инструментов; 


scrollx И радехоЕЕзее — число пикселов, на которое документ прокручен по 
горизонтали; 


scrollY И pageYOffset — число пикселов, на которое документ прокручен по 
вертикали. 


Методы объекта window: 


0 
o 
o 
o 


alert () — отображает окно сообщения (см. разд. 3.1.6); 

confirm() — выводит окно подтверждения (см. разд. 3.1.7); 

prompt () — показывает окно с полем ввода (см. разд. 3.1.8); 

эсго11То (<Х>, <Ү>) — прокручивает содержимое окна в точку с координатами 
<X> и <Y>; 

scrollBy(<tX>, <tY>) — прокручивает окно на заданные расстояния; 

ореп () И showModalDialog () — открывают новое окно. Первый метод открывает 


обычное окно, а второй — модальное (блокирующее другие окна до момента 
закрытия). Так как всплывающие окна стали использовать для отображения 
рекламы, \еБ-браузеры добавили возможность блокировки всплывающих окон 
в настройках (метод showModalDialog() многие УУеВ-браузеры вообще удалили), 
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и эта блокировка устанавливается по умолчанию. Поэтому рассчитывать, что 
пользователь увидит окно, не стоит. На сегодняшний день все М№еб-страницы 
отображаются на отдельных вкладках, а не в отдельных окнах, поэтому откры- 
вать отдельное окно, а тем более модальное, — это не уважать пользователя. 
Для имитации создания диалогового окна лучше использовать возможности 
ЈауаЅсгірі-библиотек — например, jQuery ІЛ Dialog. 


Кроме того, имеются четыре метода для работы с таймерами, которые мы рассмот- 
рели в разд. 3.9.6. 


3.14.3. Работа с фреймами 


Для работы с фреймами предназначены следующие свойства объекта window: 


С frames — коллекция фреймов. Обратиться к элементам коллекции можно по HH- 
дексу, указанному внутри квадратных скобок, а также по названию (значению 
параметра папе тега <iframe>). Общее количество фреймов доступно через свой- 
СТВО length: 


console. log (window. frames.length) ; 
console.log (window. frames [0] .document.title); 
console.log (window. frames .frame1.document.title); 


С length — количество фреймов, отображаемых в текущем окне; 
С name — имя окна или фрейма; 
П parent — ссылка на родительское окно: 
сопѕо1е.1од ("рагепі: " + window. parent .document.title); 
O self и міпдоч- ссылка на текущее окно: 


сопзо1е.1оа("ве1Е: " + window.self.document.title); 


О сор — ссылка на самое верхнее родительское окно: 


сопзо1е.іоа("Жор: " + м1паом. вор .Чосимепе. Е 1Е1е); 


Обратите внимание на то, что в целях безопасности документ, загруженный с дру- 
гого домена, не имеет доступа к родительскому окну. 


3.14.4. Объект navigator. 

Получение информации о Мер-браузере 

Объект navigator предоставляет информацию о самом Web-6paysepe. 
Свойства объекта navigator: 


П useraAgent — строка, содержащая полную информацию о \!еЬ-браузере (пользо- 
ватель в настройках может изменить информацию): 
console. log (window.navigator.userAgent) ; 


// Mozilla/5.0 (Windows МТ 6.2; Win64; x64; rv:56.0) 
// беско/20100101 Firefox/56.0 
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П аррсойемате — название \МеБ-браузера: 
console.log (navigator .appCodeName) ; // Mozilla 
П appName — внутреннее имя Web-6paysepa: 
console.log (navigator .appName) ; // Netscape 
П арруегѕіоп — внутренняя версия Web-6paysepa: 
console.log (navigator.appVersion); // 5.0 (Windows) 
П platform — название клиентской платформы: 
console. log (navigator.platform); // Win64 
п language — предпочитаемый пользователем язык: 
console.log (navigator.language) ; // ru-RU 


o languages -- Массив с языками в порядке предпочтения: 


console.log (navigator.languages) ; 
// Array [ "ru-RU", viun "en-US", "eon" ] 


O onLine — режим подключения: true, если клиент в настояшее время подключен 
к сети, и false, если отключен: 


console.log (пау1даког.оп пе); // true 


П cookieEnabled — режим работы cookies: возвращает true, если прием cookies 
разрешен: 


console.log (navigator.cookieEnabled); // true 


Мы уже не раз говорили, что разные \еБ-браузеры могут по-разному выполнять 
программный код. К сожалению, пользователь может изменить значения свойств 
объекта navigator в настройках \!еБ-браузера, поэтому не стоит полагаться на эти 
значения. Вместо определения названия и версии лучше использовать метод про- 
верки функциональных возможностей М№Меб-браузера. Например, проверить наличие 
необходимого метода, указав его имя без круглых скобок в операторе if. 


3.14.5. Объект $сгееп. 
Получение информации о мониторе пользователя 


Объект screen содержит информацию о характеристиках монитора клиента. 
Свойства объекта screen: 

П width — полная ширина экрана в пикселах; 

П height — полная высота экрана в пикселах: 


console.log (window. screen.width); // 1920 
console.log (window.screen.height); // 1080 


П availWwidth — ширина, доступная для окна Web-6paysepa; 
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П availHeight — высота, доступная для окна Web-6paysepa: 


console.log (screen.availWidth); // 1920 


console.log (screen.availHeight); // 1040 


С colorDepth — возвращает глубину цвета: 


console.log (screen.colorDepth); // 24 


3.14. 


6. Обьект location. 


Разбор составляющих ӘКІ -адреса документа 


Объект location содержит информацию об (//КІ.-адресе текущей УУер-страницы. 


Свойства объекта location: 


O hre 


Е — полный ОЕГ-адрес документа (доступно для чтения и записи): 


console.log (window. location.href); 


pro 


hos 
hos 
pat 


sea 


очачонам 


Баз 


tocol — идентификатор протокола; 


port — номер порта; 


t — имя хоста, вместе с номером порта; 
tname — имя домена; 
Браше — путь и имя файла; 


rch — строка параметров, указанная после знака ? (включая этот знак); 


h— имя «якоря» (закладки) в документе, указанное после знака + (включая 


этот знак). 


Методы объекта location: 


O ass 


ign (<ОВТ-адрес>) — загружает документ, ОКІ.-адрес которого указан B ка- 


честве параметра; 


П хе1оаа ([<Флаг>]) -- перезагружает документ. Если в параметре указано значе- 
ние true, то страница должна быть перезагружена с сервера, а если false (или 
параметр не указан) — то из кэша; 


П тер 


lace (<ОКІ-адрес>) — загружает документ, ОКІ-адрес которого указан в kaye- 


стве параметра. При этом информация об ОКІ-адресе предыдущего документа 
удаляется из объекта history. 


Загрузить новый документ можно не только с помощью методов assign() ИЛИ 
геріасе(), но и присвоив новый ОВГ-адрес свойству href объекта location: 


window. location.href = "newURL.html"; 


3.14. 


7. Обьект history. 


Получение информации о просмотренных страницах 


Обьект history предоставляет доступ к списку всех просмотренных за последнее 


время 


\еб-страниц. 
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Свойство length объекта history возвращает размер списка истории: 


console.log (window.history.length); 


Методы объекта history: 


o 
o 
o 


Баск() — загружает в окно предыдуший документ из списка истории; 
Ғогмага () — загружает в окно следующий документ из списка истории; 
go (<Позиция>) — перемещается в списке истории на позицию, относительный 


номер которой указан в качестве параметра (можно указать как положительное, 
так и отрицательное значение). 


3.14.8. Объект document. 
Получение полной информации о НТМЕ-документе 


Объект document предоставляет доступ ко всем элементам \еБ-страницы. 


Свойства объекта document: 


О 
o 


паша 


documentElement — ссылка на корневой элемент (тег <html>); 
head — ссылка на все содержимое тега <head>; 


title — название документа, указанное в теге <title>. Можно получить назва- 
ние и изменить его: 


window.document.title = "Новое название"; 
console.log (document.title); // Новое название 


body — ссылка на все содержимое тега <body>; 


activeElement — ссылка на активный элемент документа; 

URL — ОКГ-адрес документа в виде строки; 

location — объект location (см. разд. 3. 14.6): 

console.log (document.location.href); 

referrer — ОКГ-адрес, с которого перешел посетитель по ссылке, в виде строки; 


cookie — Обьект cookie, который позволяет сохранять данные на компьютере 
клиента; 


readyState — статус документа. Возвращает следующие строковые значения: 
Ф complete — документ полностью загружен; 


e interactive — \Меб-страница загружена не полностью, но документ доступен 
для просмотра и управления; 


e loading — документ загружается; 


lastModified — дата и время последнего изменения файла документа в виде 
строки: 


console.log (document.lastModified); 
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Методы объекта document: 


п десЕ1епепеВуіа(<Идентификатор>) — возвращает ссылку на элемент с указанным 
идентификатором или значение null: 


var div1 = document.getElementById("div1"); 


С getElementsByName (<Название элемента>) возврашает ссылку на коллекцию 
элементов, у которых параметр папе равен значению аргумента; 


С getElementsByTagName (<Тег>) — возвращает ссылку на коллекцию дочерних эле- 
ментов, созданных с использованием тега, переданного в качестве параметра; 


П getElementsByClassName (<Стилевой класс>) — возвращает ссылку на коллекцию 
элементов, для которых задан указанный стилевой класс (название указывается 
без точки вначале): 


<div іа="аіу1" class="cls1"></div> 


var arr = document .getElementsByClassName ("с151"); 


console.log (ахх[0].1а); // div1 


П спегу5е1есеог(<С55-селектор>) — возвращает ссылку на первый элемент, соот- 
ветствующий указанному С55-селектору, или значение null: 


<div 1а="91у1" class="cls1"></div> 


console.log (document.querySelector(".cls1").id); // аіу1 
console. log (document .querySelector ("#911") .с1аззМаще); // с151 


П querySelectorAll (<С55-селектор>) — возвращает ссылку на коллекцию элемен- 
тов, соответствующих указанному С55-селектору. 


Получим содержимое всех абзацев: 


<р>Абзац 1</р><р>Абзац 2</р> 


var arr = document .querySelectorAll ("р"); 
for (var i = 0; i < arr.length; i++) { 
console.log (arr[i].innerHTML); 


} 


С elementFromPoint (<Х>, <Ү>) — возвращает ссылку на элемент, находящийся ПО 
координатам <х> и <Ү>, или значение null; 


О write (<HTML-kon>) — записывает текст, переданный как параметр, в текушее 
место документа: 


document.write ("<р>Абзац</р>"); 


С writeln (<НТМІ-код>) — записывает текст, переданный как параметр, в текущее 
место документа, а в конце строки добавляет символы возврата каретки и пере- 
вода строки. Методы мк1ее() И writeln () обычно используются при формирова- 
нии документа на этапе загрузки. 


336 Глава 3 


Коллекции объекта document: 

O forms — коллекция всех форм; 

O images — коллекция всех изображений; 
O links — коллекция ссылок; 

О scripts — коллекция скриптов. 


Получить число элементов коллекции позволяет свойство length. Доступ к элемен- 
там коллекции осуществляется по индексу внутри квадратных скобок. 


Получим ОКІ -адреса всех ссылок: 


var arr = document. links; 
for (var i = 0; i < arr.length; i++) { 
console.log (arr[i].href); 


3.14.9. Узлы документа 


Стандарт РОМ предоставляет следующие свойства для получения информации об 
узле и передвижения по дереву НТМГ-документа: 


o nodeType — тип узла. Может принимать следующие значения: 


© 1— ELEMENT_NODE — тег; 

 3-- TEXT_NODE — простой текст; 

e 8 — СОММЕМТ МОРЕ — комментарий; 

e 9-- БОСОМЕМТ МОРЕ — НТМГ-документ; 


О nodeName — имя узла. Например, название тега для узла ELEMENT NODE; 


O nodeValue — значение узла. Например, текст для узлов ТЕХТ МОРЕ И СОММЕМТ NODE; 


O childNodes — список всех дочерних узлов: 


var arr = document .body.childNodes; 

for (var i = 0; i < arr.length; i++) { 
console.log (агг [і] .поаеТуре); 
console.log (агг [і] .nodeName) ; 
console.log (arr[i].nodeValue); 


} 
firstChild — первый дочерний узел или значение null, если такого узла нет; 
lastChild — последний дочерний узел или значение null, если узла нет; 


рагепЕМоае — родительский узел или значение null, если такого узла нет; 


ооо 


previousSibling — узел, непосредственно следующий перед указанным узлом, 
или значение null, если такого узла нет; 


О 


nextSibling — узел, непосредственно следующий после указанного узла, или 
значение null, если такого узла нет. 
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Создать новый узел и добавить его в НТМІ -документ позволяют следующие методы: 


O createl 


Element (<Название тега>) — создает новый узел Е 


ЕМ 


ЕМТ МОР 


F 
2 


П createTextNode (<Текст>) — создает новый узел ТЕХТ мор 


p. 


> 


С аррепасһі1а (<Новый узел>) — добавляет новый узел в конец указанного узла. 


Если узел уже находится в документе, то удаляет его и вставляет в новое место. 
В качестве примера создадим абзац со ссылкой и добавим его в конец доку- 
мента: 


var р = document.createElement ("р"); // Создаем абзац 


var text = аӢоситепі .сгеаёеТехіМоае ("Это текст абзаца "); 


р.аррепасһі1а (text); // Добавляем текст в абзац 


var link = document.createElement ("а"); // Создаем ссылку 
link.href = "test.html"; // Задаем ОВТ-адрес ссылки 
хаг Ііпк «ехе = document.createTextNode ("Это текст ссылки"); 


1іпк.аррепасһі1а(1іпк ёехі); // Добавляем текст в ссылку 


р.аррепасһі1а (1іпк); // Добавляем ссылку в конец абзаца 


// Добавляем новый узел в конец документа 
document . роду. аррепасћі1а (р); 


insertBefore (<Новый узел>, <Узел>) — добавляет новый узел перед указанным 
узлом. Если узел уже находится в документе, то удаляет его и вставляет в новое 
место: 


var р = document .getElementsByTagName ("р") [0]; 


// Перемещаем первый абзац в конец документа 
document .body.insertBefore (p, досопепі.роау.1аѕёсһі1а); 


Вставим новый абзац в начало документа: 


var р = document.createElement ("р"); // Создаем абзац 


var text = дӢосиотепі .сгеаёеТехіМоае ("Это текст абзаца "); 


p.appendChild (text); // Добавляем текст в абзац 


// Добавляем новый узел в начало документа 
document .body.insertBefore (р, document .body.firstChild); 


cloneNode (true | false) — создает копию узла. Если в качестве параметра зада- 
но значение true, то будут скопированы все потомки указанного узла. Обратите 
внимание: обработчики событий не копируются. 


Сделаем полную копию абзаца и добавим новый узел в конец документа: 


var р = document .getElementsByTagName ("р") [0] .с1опемоае (true); 


// Добавляем в конец документа 
document .body.appendChild (р); 


hasChildNodes () -- возвращает значение true, если узел имеет дочерние узлы, 
ИЛИ false — в противном случае: 


var р = document .getElementsByTagName ("р") [0]; 


if (p.hasChildNodes ()) console.log ("Есть"); 


else сопво1е.1о4("Дочерних узлов нет"); 
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С гепоуесһі14(<Удаляемый узел>) — удаляет узел и возвращает его. В качестве 


примера удалим первый абзац: 


var р = document .getElementsByTagName ("р") [0]; 
p.parentNode.removeChild (р); 


гер1асесһі1а (<Новый узел>, <Старый узел>) — заменяет узел другим узлом. 3a- 
меним первый тег <div> на новый абзац: 


var р = document.createElement ("р"); // Создаем абзац 
var text = аосиотепі .сгеаёеТехіМоае ("Это текст абзаца"); 


p.appendChild (text); // Добавляем текст в абзац 


var div = document .getElementsByTagName ("div") [0]; 
div.parentNode.replaceChild(p, div); 


Для получения информации об элементах таблицы предназначены специальные 
свойства: 


o 
o 


0 
o 
o 


caption — ссылка на элемент CAPTION или значение null, если OH не существует; 


<Неаа-- ссылка на элемент тнЕАр или значение null, если он не существует; 


tFoot — ссылка на элемент тғоот или значение null, если он не существует; 
tBodies — коллекция всех элементов TBODY в таблице; 


rows — Коллекция всех строк в таблице или в секции твору при использовании 
свойства tBodies. Каждый элемент коллекции содержит следующие свойства: 


Ф cells — коллекция всех ячеек в строке таблицы. Каждый элемент коллекции 
содержит свойство се11Тпаех, через которое доступен индекс ячейки в строке; 


e rowIndex — индекс строки в таблице; 


e sectionRowIndex — индекс строки внутри раздела (THEAD, TBODY или ТЕООТ). 


Для создания и удаления элементов таблицы предназначены следующие методы: 


o 


createCaption() — создает новый элемент CAPTION или возврашает ссылку на 
существующий элемент. 


Добавим заголовок к таблице: 


var table = document.getElementsByTagName ("table") [0]; 
var caption = table.createCaption (); 


var text = document .createTextNode ("Это заголовок таблицы"); 
caption.appendChild (text); // Добавляем текст в элемент CAPTION 


deleteCaption() — удаляет элемент CAPTION; 

createTHead () — создает новый элемент THEAD или возвращает ссылку на суще- 
ствуюший элемент; 

deleteTHead () удаляет элемент THEAD; 

createTFoot () -- создает новый элемент TFOOT или возврашает ссылку на суше- 


ствуюший элемент; 


deleteTFoot () — удаляет элемент TFOOT; 
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П deleteRow (<Индекс>) — удаляет строку из таблицы по указанному индексу; 

O іпзегеБом(<Индекс>) — вставляет новый пустой элемент тв в указанную пози- 
цию; 

O іһѕегіСе11 (<Индекс>) — вставляет пустой элемент тр. 


Добавим новый ряд в самое начало первой таблицы в НТМІ -документе: 


var table = document.getElementsByTagName ("table") [0]; 
var row = table.insertRow (0); 

var се111 = гом.іпѕегіСе11 (0); 

var се112 = гом.іпзегіСе11(1); 


var t1 = document.createTextNode ("Первая ячейка"); 


var t2 = document.createTextNode ("Вторая ячейка"); 
се111.аррепаСҺ114(%1); 
се112.аррепаСҺ114(%2); 


O аеІебесе11 (<Индекс>) — удаляет указанную ячейку. 


3.14.10. Общие свойства и методы 
элементов Ү/ер-страницы 


Все элементы \!еБ-страницы также имеют свойства и методы. Помимо свойств, 
специфических для конкретных элементов, все они имеют следующие общие свой- 
ства: 


С :а — уникальный идентификатор элемента, заданный параметром 1а; 
ОС className — имя стилевого класса, заданное параметром class; 
С tagName — имя тега элемента: 


<div 1а="91у1" class="cls1">TekctT</div> 


var elem = document.getElementById('div1'); 


console.log (elem.id); // аіу1 
console.log (е1ещ.с1аззМаще); // с151 
console.log (е1ет.адМаше) ; // DIV 


п parentElement — ссылка на элемент-родитель; 


С innerHTML — содержимое элемента, включая внутренние теги HTML. Если при- 
своить свойству новое значение, то содержимое элемента также изменится: 


var elem = document.getElementById('div1'); 
lem. innerHTML = "<р>Новый текст</р>"; 


Результат в НТМГ-коде: 


<div іа="аіу1"><р>Новый текст</р></аіу> 


С textContent — содержимое элемента в виде текста. Если присвоить свойству 
новое значение, то содержимое элемента также изменится: 
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var elem = document.getElementById('div1'); 


lem. textContent = "Новый текст"; 


console. log (elem. textContent); // Новый текст 


П attributes — возвращает коллекцию всех параметров тега. Каждый элемент 
коллекции содержит два свойства: 


® name — название параметра; 
® value — значение параметра. 


Пример: 


var elem = document.getElementById('div1'); 


var arr = elem.attributes; 
for (var i = 0; i < arr.length; i++) { 
console.log (arr[i].name + " = " + arr[i].value); 


} 
Общие методы элементов \МеБ-страницы: 


п getAttribute (<Имя параметра>) — возвращает значение параметра с именем <Имя 
параметра> тега текущего элемента: 


var elem = document.getElementById('div1'); 


console.log (elem.getAttribute ("іа")); // div1 


O setAttribute (<Имя параметра>, <Значение>) — присваивает <Значение> парамет- 
ру с именем <Имя параметра> тега текушего элемента; 


С] removeAttribute (<Имя параметра>) — удаляет параметр тега текущего элемента; 


О hasAttribute (<Имя параметра?) -- возвращает значение true, если параметр 
с указанным именем существует, и Еа1зе — в противном случае; 


п getElementsByTagName (<Тег>) — возвращает ссылку на коллекцию дочерних эле- 
ментов, созданных с использованием тега, переданного в качестве параметра; 


С getElementsByClassName (<Стилевой класс>) — возвращает ссылку на коллекцию 
дочерних элементов, для которых задан указанный стилевой класс (название 
указывается без точки в начале); 


П сџегуЅе1есіог (<С55-селектор>) — возвращает ссылку на первый дочерний эле- 
мент, соответствующий указанному С55-селектору, или значение null; 


п амцегуӘ5е1есеокА11(<С55-селектор>) — возвращает ссылку на коллекцию дочерних 
элементов, соответствующих указанному С$5-селектору; 


O scrollIntoView(true | false) — вызывает прокрутку страницы в окне так, YTO- 
бы текущий элемент оказался в поле зрения. Если параметр равен true, то теку- 
щий элемент окажется у верхнего края окна, а если false — то у нижнего края. 


Мы можем обращаться к параметрам любого тега напрямую: 
С изменим адрес гиперссылки: 


<a href="doc1l1.html" id="link1">TekcT ссылки</а> 
<script> 
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document .getElementById("link1").href = "doc2.html"; 
</вскіре> 


О изменим адрес изображения: 


<img згс="1таде1.91Е" 1а="1таде1"> 
<script> 


document .getElementById("image1").src = "image2.gif"; 
</script> 


Какие параметры имеет TOT или иной тег и какие значения он может принимать, мы 
рассматривали при изучении языка HTML в главе 1. 


3.14.11. Работа с таблицами стилей 
при помощи JavaScript 
Свойство style позволяет получить доступ к стилям элемента, указанным в пара- 


метре style. Для того чтобы получить значение атрибута стиля, заданное вне тега, 
нужно использовать не свойство style, а метод getComputedStyle () объекта window: 


var elem = document.getElementById('div1'); 


console.log (window. getComputedStyle (elem, null).width); // 956px 


Обратите внимание: метод getComputedStyle() возврашает вычисленное значение 
в виде строки, а не то значение, которое было указано в С55. Если значение атри- 
бута было указано в процентах, то мы получим в большинстве случаев абсолютное 
значение на момент вызова метода. 


Свойства объекта style соответствуют атрибутам в каскадных таблицах стилей 
с небольшими отличиями в написании: 


O символы дефиса (-) удаляются; 


С первые буквы всех слов в названии атрибута, кроме первого, делаются пропис- 
ными. 


Приведем примеры преобразования атрибутов стиля в свойства объекта style: 


color -> color 

font-family -> fontFamily 

font-size -> fontSize 
border-left-style -> borderLeftStyle 


Пример указания значений: 


<div іа="аіу1">Текст</адіу> 


var elem = document.getElementById('div1'); 


elem. style.color = "red"; 
elem. style.fontFamily = "Verdana"; 
elem. style.fontSize = "14рі"; 


lem. style.borderLeftStyle = "solid"; 
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Атрибуты стилей и их допустимые значения мы рассматривали при изучении CSS 
в главе 2. По аналогии с приведенными примерами можно преобразовать названия 
атрибутов стиля в свойства объекта style. 


3.14.12. Обьект selection. 
Проверка наличия выделенного фрагмента 


Объект selection позволяет получить доступ к тексту, выделенному в окне Web- 
браузера. Для получения выделенного текста в документе (но не в текстовых 
полях) применяется метод getSelection() объекта window. Объект, возвращаемый 
методом де<5е1есеіоп(), содержит следующие свойства: 


o 


o 


anchorNode — возвращает ссылку на текстовый узел, в котором началось выде- 
ление или значение null. 


Получим элемент, в котором началось выделение, и сделаем его фон красным: 


var rng = window.getSelection (); 
if (rng.anchorNode) 
rng.anchorNode.parentNode.style.backgroundColor = "red"; 


anchorOffset — возвращает смещение от начала текстового узла (возвращаемого 
свойством апсһоүКоде) до начальной границы выделения; 


ҒосавКоде — возвращает ссылку на текстовый узел, в котором закончилось вы- 
деление; 


focusOffset — возвращает смещение от начала текстового узла (возвращаемого 
СВОЙСТВОМ focusNode) до конечной границы выделения: 
маг rng = window.getSelection(); 


if (rng.focusNode) { 
rng .focusNode.parentNode.style.backgroundColor = "геа"; 


console. log (rng.focusoffset); 
} 


rangeCount — возвращает количество объектов Range, которые входят B выде- 
ленный фрагмент; 


15Со11арзеа — возвращает true, если объект свернут в точку, и false — B про- 
тивном случае. 


Методы объекта selection: 


o 


toString () — возвращает текстовое содержимое выделенного фрагмента: 


var rng = window.getSelection (); 
if (!rng.isCollapsed) { 
console.log (rng.toString ()); 


} 


collapse (<Узел>, <Смешение>) — сворачивает выделение в указанную точку; 
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o 


О 


collapseToStart () — сворачивает выделение в начало фрагмента; 


со11арѕеТоЕпа () — сворачивает выделение в конец фрагмента; 


deleteFromDocument () — удаляет выделенный фрагмент из документа; 


ехсепа(<Узел>, <Смешение>) — перемещает конечную границу выделенного 
фрагмента в указанную позицию. 


В качестве примера расширим (или уменьшим в зависимости от направления 
выделения) фрагмент до конца узла, содержащего конечную границу: 


маг rng = window.getSelection(); 
if (!гра.1$Со11арзеа) { 
var len = rng.focusNode. length; 
if (rng.focusOffset!=len) { 
rng.extend (rng.focusNode, len); 


} 


else window.alert ("Нет выделенного фрагмента"); 


getRangeAt (<Индекс>) — возвращает объект Range по указанному индексу; 
addRange (<Объект Range>) — добавляет указанный объект Range K текушему вы- 
делению; 

removeRange (<Объект Вапде>) — удаляет указанный объект Range из выделенного 
фрагмента; 

removeAllRanges () — удаляет все объекты Range из выделенного фрагмента; 
selectAllChildren (<Узел>) — выделяет текстовое содержимое указанного узла и 


всех его потомков. 
Выделим содержимое первого абзаца в документе: 


var rng = window.getSelection (); 


var elem = document .getElementsByTagName ("р") [0]; 
rng.selectAllChildren (elem); 


Фрагмент, выделенный в текстовом поле, нельзя получить с помошью метода 
getSelection(). Вместо этого метода следует использовать свойства selectionStart 
И selectionEnd: 


<input type="text" name="txt1" id="txt1"> 


// Ссылка на текстовое поле 


var elem = document .getElementById("txt1"); 


if 


(elem. selectionStart != undefined && 


elem.selectionEnd != undefined) { 
var s = elem.selectionStart; // Начальная позиция 


var е = elem.selectionEnd; // Конечная позиция 


window.alert (е1ем.уа1ае .зирзЕг1па (s, е)); 
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Выделить фрагмент внутри текстового поля позволяет метод 
setSelectionRange (<Начало>, <Конец>): 


// Ссылка на текстовое поле 

var elem = document .getElementById("txt1"); 
elem. focus (); 

elem. setSelectionRange (0, 5); 


3.14.13. Обьект Range. Расширение или сжатие 
выделенного фрагмента текста 

Объект Range предоставляет доступ к фрагменту текста У/ер-страницы. Создать 
область позволяет МЕТОД createRange () объекта document: 


var rng = document.createRange (); 


Можно также получить ссылку на выделенную область с помощью метода 
getRangeAt (<Индекс>) объекта selection: 


var sel = міпдом.дек5е1есбіоп(); 
if (!5е1.1$Со11арзеа) { 

var rng = sel.getRangeAt (0); 
} 


Свойства объекта Range: 


П startContainer — возвращает ссылку на узел, в котором содержится начальная 
точка области; 


П startOoffset — возвращает смещение от начала узла (возвращаемого свойством 
startContainer) до начальной точки области; 


П endContainer — возвращает ссылку на узел, в котором содержится конечная TOY- 
ка области; 


П endoffset — возвращает смещение от начала узла (возвращаемого свойством 
endContainer) до конечной точки области: 


<р іа="Ехі1">Текст внутри абзаца</р> 


var elem = аӢоситепі .дееЕ1етептЕВуТа ("ЕхЕ1") .ТігвіСІі114; 
var rng = document.createRange (); 
rng.setStart (elem, 1); // Начальная точка 


rng.setEnd (elem, 5); // Конечная точка 
console.log (rng.startContainer); 
console. log (rng.startOffset); 

console.log (гпо.епасопёаіпег); 
console. log (rng.endOffset); 

var sel = window.getSelection(); 

sel.addRange (rng); // Выделяем область 


П collapsed — возвращает true, если объект свернут в точку, и false — в против- 
ном случае; 
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o 


commonAncestorContainer — возвращает ссылку на узел, в котором содержатся 
как начальная, так и конечная точки области. 


Методы объекта Range: 


o 
o 


toString () -- возвращает текстовое содержимое области; 


setStart (<Узел>, <Смешение>) — устанавливает положение начальной точки об- 
ласти; 


весЕпа(<Узел>, <Смешение>) — устанавливает положение конечной точки области; 


setStartBefore (<Узел>) — устанавливает начальную точку области перед ука- 
занным узлом; 

setStartAfter (<Узел>) — устанавливает начальную точку области после указан- 
ного узла; 

setEndBefore (<Узел>) устанавливает конечную точку области перед указан- 
ным узлом; 

setEndAfter (<Узел>) — устанавливает конечную точку области после указанного 
узла; 

сіопеВапде() — создает копию объекта Range; 

cloneContents () — создает копию внутреннего содержимого области. В качестве 
значения возвращает объект DocumentFragment; 

detach () — удаляет объект Range; 

deleteContents () — удаляет все внутреннее содержимое области из документа; 
extractContents () — удаляет все внутреннее содержимое области из документа 


и возвращает объект DocumentFragment, в котором будет находиться удаленное 
содержимое области; 


collapse (<true | Ға1ве>) — сворачивает область в указанную точку. Если в Ka- 
честве параметра указано значение true, то область сворачивается в начальную 
точку, а если false — то в конечную точку; 


selectNode (<Узел>) ограничивает область указанным в качестве параметра 
узлом; 

selectNodeContents (<Узел>) — ограничивает область внутренним содержимым 
указанного узла; 

insertNode (<Узел>) вставляет новый узел в начало области; 

surroundContents (<Узел>) — вкладывает содержимое области в указанный узел; 
сопрагеВоцпдагуРоіпез («Точки сравнения>, <Область, с которой сравниваем>) — 


сравнивает позиции двух областей. В качестве первого параметра могут быть 
указаны следующие значения: 


e 0 — ЅТАҺТ ТО START — сравнение начальных точек; 


% 1-- 5ТАКТ ТО END — сравнение начальной точки области, указанной в качест- 


ве второго параметра, с конечной точкой данной области; 
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% 2--ЕМГр ТО END — сравнение конечных точек; 


e 3— END ТО START — сравнение конечной точки области, указанной в качестве 
второго параметра, с начальной точкой данной области. 


В качестве примера использования объекта Вапае найдем внутри абзаца текст 
"фрагмент" И ВЛОЖИМ ЕГО В Тег <strong>: 


<р іа="Ехі">Текст для выделения фрагмента</р> 
<input type="button" id="btn1" onclick="handler()" уа1ае="Выделить"> 
<script> 
function handler () { 
if (document.createRange) { 

var р = document.getElementById("txt").firstChild; 

var text = p.nodeValue; // Получаем текст абзаца 

var ind = бехі.іпаехоғ ("фрагмент"); 

if (ind != -1) { // Если текст найден 


// Создаем объект Range 
var rng = document.createRange (); 
rng.setStart (p, ind); // Начальная точка 


// Конечная точка 
rng.setEnd(p, ind + 8); 


// Элемент, в который будем вкладывать текст 
var s = document.createElement ("strong"); 


// Вкладываем область в тег strong 
rng .surroundContents ($); 


} 
else { 
window.alert ("Мер-браузер не поддерживает метод createRange"); 


} 
</script> 


Теперь изменим цвет фона текстового фрагмента, выделенного пользователем: 


<р іа="Ехі">Текст для выделения фрагмента</р> 
<input type="button" id="þbtn1" onclick="handler()" уа1ае="Выделить"> 
<script> 
function handler () { 
if (document.createRange && window.getSelection) { 
var sel = window.getSelection(); 
if (!sel.isCollapsed) { 
var rng = sel.getRangeAt (0); 
sel.collapseToStart(); // Убираем выделение 


// Элемент, в который будем вкладывать выделенный текст 
var в = document.createElement ("span"); 
s.style.backgroundColor = "#FFE9B3"; 

// Вкладываем область в Ter span 

rng .surroundContents ($); 
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else window.alert ("HeT выделенного фрагмента"); 


} 


еізе { 


міпдом.а1еге("ИМер-браузер не поддерживает методы"); 


} 
</script> 


3.14.14. Сохранение данных на компьютере клиента 


\!еБ-браузеры позволяют сохранять небольшой объем информации в специальном 
текстовом файле на компьютере пользователя. Такие файлы называются cookies. 
Возможность использования сооКіеѕ можно отключить в настройках \еБ-браузера. 
Для проверки возможности использования сооКіев следует задействовать свойство 
соокіеЕпар1еа объекта navigator: 


if (пауідаїог.соокіеЕпар1Іеа) { 
window.alert ("Использование cookies разрешено"); 


) 


Запись сооКіев производится путем присвоения значения свойству соокіе объекта 
document в следующем формате: 


document.cookie = "<Имя>=<Значение>; [ехр1гез=<Дата>;] 
[аотаіп=<Имя домена>;] [ра б=<Путь>;] [secure;]"; 
Здесь используются следующие параметры: 


С <имя>=<Значение> — задает имя сохраняемой переменной и ее значение. Это 
единственный обязательный параметр. Если не задан параметр ехрігез, ТО ПО 
истечении текущего сеанса работы УУер-браузера cookies будут автоматически 
удалены; 


П expires — указывает дату удаления cookies в следующем формате: 
Thu, 01 Jan 1970 00:00:01 GMT 


Получить дату в этом формате можно с помощью методов setTime() и 
toUTCString() класса Date. Методу setTime() нужно передать текущее время 
в миллисекундах плюс время хранения cookies в миллисекундах. Текущее время 
можно получить с помощью метода десТіпе(). Рассчитать время хранения 
сооКіев можно исходя из следующих соотношений: 


e | секунда = 1 000 миллисекунд; 

e | минута = 60 секунд = 60 000 миллисекунд; 

е | час = 60 минут = 3 600 секунд = 3 600 000 миллисекунд; 

е | день = 24 часа = (24x3 600 000) миллисекунд = 86 400 000 миллисекунд. 
Например: 


var а = new Пабе(); 
d.setTime (d.getTime() + 3600000); // Задан 1 час 
var endDate = d.toUTCString (); // Дата удаления cookies 
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С астаіп=<Имя домена> — задает доменную часть ОКГ-адреса, для которой дейст- 
вует созданный файл cookies; 


С раеһ-<Путь>-- задает часть І/КІ.-адреса, определяющую путь к документам, для 
которых действует созданный файл cookies. 


Считывание cookies производится с помощью свойства cookie объекта document: 


var cookies = document.cookie; 


Переменная cookies будет содержать строку, в которой перечислены все установ- 
ленные пары имя=значение через точку с запятой: 


"имя1=значение1; имя2-значение2" 


Для удаления cookies следует установить cookies с прошедшей датой. 


В качестве примера сохраним имя и фамилию пользователя, и при следующем по- 
сещении будем приветствовать его, используя сохраненные данные (листинг 3.60). 
Добавим также возможность удаления cookies. Для совместимости закодируем вве- 
денные данные с помощью метода encodeURIComponent (), а при выводе раскодируем 
их с помощью метода decodeURIComponent (). Это позволяет безопасно сохранять 
значения, введенные кириллицей. 


Листинг 3.60. Установка и удаление cookies 


<!DOCTYPE html> 

<html lang="ru"> 
<head> 
<meta charset="utf-8"> 


<title>ycrTaHnoBska и удаление cookies</title> 
<script> 
function saveCookies() { 


if (navigator.cookieEnabled) { 
var txt1 = document .getElementById("txt1"); 
var txt2 = document .getElementById("txt2"); 
if (txtl.value != "" 66 txt2.value != "") { 
var d = new Date(); 
d.setTime (d.getTime() + 3600000); // Задан 1 час 


var endDate = а.ғоО0ТС5егіпа(); // Дата удаления сооКіез 
var str = "папеі-" + encodeURIComponent (txt1.value); 

str += ";expires=" + endDate + ";"; 

document.cookie = str; 

str = "папе2-" + encodeURIComponent (txt2.value); 

str += ";expires=" + endDate + ";"; 


document.cookie = str; 
txtl.value = ""; 
txt2.value = ""; 


showCookies (); 
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else 1 
window.alert ("He заполнено обязательное поле"); 


} 
function deleteCookies() { 
if (navigator.cookieEnabled) { 
if (document.cookie != "") { 


var а = new Date (); 

d.setTime (1000); // Дата в прошлом 

var endDate = d.toUTCString(); 

document.cookie = "namel=;expires=" + endDate + ";"; 
document.cookie = "name2=;expires=" + endDate + ";"; 


showCookies (); 


} 


function showCookies() { 


if (navigator.cookieEnabled) { 
var div1 = document .getElementById ("діу1"); 


if (document.cookie != "") { 
var агг1 = ||, arr2 = |; 
var obj = 1); 
var str = document.cookie; 
if (вег.іпдехоҒ("; ") != -1) { 
аггі = str.split("; "); 


for (var i = 0, c = arrl.length; i < c; i++) { 
arr2 = агг1[1].ѕр1ії ("="); 
obj [arr2[0]] = arr2[1]; 
} 
} 
else { 
arr2 = str.split("="); 
obj [arr2[0]] = arr2[1]; 
} 
var msg = "Привет, "; 
msg += decodeURIComponent (obj .name2) .replace("<", "&lt;"); 
msg += " " + decodeURIComponent (obj.name1).replace("<", "&lt;"); 


div1.innerHTML = msg; 
} 
else div1.innerHTML = ""; 


} 

window.onload = function() { 
showCookies (); 

} 

</script> 

</head> 
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<роау> 

<div id="div1"></div> 

<div> 

Введите ваше имя:<рг> 

<input type="text" id="txt1"><þbr> 

Введите вашу фамилию:<ргү> 

<input type="text" id="txt2"><þbr> 

<input type="button" уа1ае="Сохранить" onclick="saveCookies ()"><br> 
<input type="button" уа1ае="Удалить cookies" onclick="deleteCookies () "> 
</div> 

</body> 

</html> 


3.15. Работа c элементами формы 


При изучении НТМІ, мы рассмотрели создание элементов форм. В этом разделе мы 
научимся с помощью JavaScript обрабатывать данные, введенные пользователем 
в элементы формы. Обработка на стороне клиента позволит снизить нагрузку на 
\!еБ-сервер за счет отмены отправки данных формы при неправильно введенных 
значениях. 


3.15.1. Элементы управления 


Для начала еще раз приведем основные элементы форм: 

<input ёуре="ёехі"> — текстовое поле ввода; 

<input type="password"> — текстовое поле для ввода пароля; 
<input буре="Ғі1е"> — позволяет отправить файл на \еБ-сервер; 
<input type="checkbox"> — Поле для установки флажка; 


<input type=" radio"> — элемент-переключатель; 


<input type="reset">— кнопка, при нажатии которой вся форма очищается; 


пачаачаа 


<input type="submit">— кнопка, при нажатии которой происходит отправка 
данных на \еб-сервер; 


<input type="þbutton"> — обычная командная кнопка; 


0 
П <input буре="Һіадеп"> — скрытый элемент формы; 
С <хехкагеа>Текст</&ехкахеа> — поле для ввода многострочного текста; 


п <ѕе1есїі><орііоп>Элемент</орііоп></ѕе1есі> — список с возможными значениями. 


В HTML 5 были добавлены элементы: url, email, tel, number, range, color, search, 
date, time, datetime-local, month И week (см. разд. 1.11.4). 


Все элементы должны быть расположены внутри тегов <form> H </form>. Именно 
форма определяет, что делать с данными дальше. Параметр action задает ОКІ-ад- 
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рес программы обработки формы, параметр method определяет, как будут пересы- 
латься данные от формы до \еБ-сервера (методом СЕТ или POST), а параметр 
епсеуре задает МІМЕ-тип передаваемых данных. С помощью параметра папе зада- 
ется уникальное имя формы, благодаря которому можно управлять элементами 
формы из скриптов. 


Параметр папе необходимо указывать во всех элементах формы, за исключением 
кнопок. Именно имя элемента, заданное в параметре name, пересылается на Web- 
сервер вместе со значением элемента формы. Имя элемента в пределах формы 
должно быть уникальным, за исключением переключателей, объединенных в группу. 


Для доступа к элементам формы из скриптов необходимо указать параметр 14. 
Обычно для элементов форм значения параметров папе и 1а содержат одно и то же 
ИМЯ: 


<input type="text" name="text1" id="text1"> 


Если данные не нужно отправлять на \еб-сервер, то можно вообще не использо- 
вать тег <form>. В этом случае вся обработка осуществляется с помощью скриптов. 


3.15.2. Коллекция forms. 
Доступ к элементу формы из скрипта 
Все формы документа доступны через коллекцию forms. Например, чтобы получить 


значение текстового поля с именем text1 (входящего в состав формы form1), можно 
воспользоваться следуюшей строкой кода: 


document .forms ["form1"] .text1.value 
K отдельной форме можно также обратиться по индексу: 


document .forms [0] .text1.value 


Получить доступ к элементу вне зависимости от того, находится он внутри формы 
или нет, позволяет метод getElementById() объекта document: 


document .getElementById("text1").value 


Все элементы формы доступны через коллекцию elements: 


document .forms ["form1"] .е1етепіѕ ["text1"] .value 
document . forms ["form1"] .elements [0] .value 
document .forms [0] .elements [0] .value 


3.15.3. Свойства обьекта формы 


Объект формы поддерживает следующие свойства: 

С length — количество элементов формы; 

П action — ОКІ-адрес программы обработки формы; 
O elements — ссылка на коллекцию elements; 
п 


encoding — МИМЕ-тип передаваемых данных; 
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С method — режим пересылки данных формы на У/еВ-сервер; 
С епсеуре — метод кодирования данных формы; 
С name — имя формы; 


П target — имя фрейма, в который будет загружен документ, являющийся резуль- 
татом обработки данных формы №МеБ-сервером. 


В НТМІ. 5 доступны также два новых свойства: 


О autocomplete — признак, указывающий, работает ли в форме автодополнение. 
Если в качестве признака задана строка "оп", автодополнение работает, если 
"off" — не работает; 


O noValidate — признак TOTO, будет ЛИ форма проверять введенные в нее данные 
на корректность. Значение true активизирует проверку данных, значение false 
отключает ее. 


3.15.4. Методы объекта формы 


Объект формы поддерживает следующие методы: 


П ѕиртіє () — выполняет отправку данных формы серверной программе. Анало- 
гично нажатию кнопки Submit; 


П reset() — очищает форму, т.е. все элементы формы получают значения по 
умолчанию. Аналогично нажатию кнопки Reset. 


Также нас может заинтересовать метод checkValidity(). Он возвращает true, если 
во все элементы управления формы занесены корректные данные, и false — в про- 
тивном случае: 


<form action="test.php" id="frm"> 

<input type="url" name="url" required> 

<input type="button" уа1ае="Проверить" опс11ск="рапа1ек () "> 
</form> 

<script> 

function handler () { 


var frm = document.getElementById ("frm"); 
if (!frm.checkValidity()) { 


window.alert ("Введите корректные данные!"); 


} 
</script> 


3.15.5. События обьекта формы 
Объект формы поддерживает следующие события: 
О onsubmit — наступает при отправке данных формы; 


П onreset — возникает при очистке формы. 
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Элементы управления имеют свои свойства, методы и события. Рассмотрим каж- 
дый тип элементов формы по отдельности. 


3.15.6. Текстовое поле и поле ввода пароля 


Текстовое поле и поле для ввода пароля имеют одинаковые свойства: 
С value — значение элемента формы; 
С defaultValue — начальное значение, заданное параметром value; 


O disabled — запрет элемента формы: если задано значение true, то поле является 
неактивным (отображается серым цветом); 


П form— ссылка на форму, в которой находится элемент; 


п maxLength — Максимальное количество символов, которое может быть введено 
в поле; 


П name — имя элемента; 
П type — тип элемента формы; 


п геааор1у — запрет редактирования: если задано значение true, текст в поле 
нельзя редактировать, если false — МОЖНО. 


Методы тоже одинаковы: 


П blur() — убирает фокус ввода с текущего элемента формы; 
С ғосиѕ () — помещает фокус на текущий элемент формы; 
С select () — выделяет текст в поле. 


Обоими элементами поддерживаются следующие события: 
П onblur — происходит при потере фокуса элементом формы; 


С onchange — наступает после изменения данных в поле и при переводе фокуса 
ввода на другой элемент либо при отправке данных формы. Наступает перед со- 
бытием onblur; 


O опҒосав — возникает при получении фокуса ввода элементом формы. 


Кроме указанных событий можно использовать стандартные события мыши и кла- 
виатуры (см. разд. 3.13.9 и 3.13.10). 


В качестве примера рассмотрим форму ввода E-mail и пароля с проверкой правиль- 
ности ввода (листинг 3.61). Если данные введены неправильно, то при отправке 


формы: 

П поле выделяется розовым цветом; 
П текст в поле выделяется; 

0 выводится сообщение об ошибке; 
П отправка формы прерывается. 


Поле Повтор E-mail запрещено для редактирования. При вводе адреса электрон- 
ной почты данные автоматически копируются из поля E-mail в поле Повтор 
Е-тай. 
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Листинг 3.61. Форма ввода Е-тай и пароля с проверкой правильности ввода 


<!DOCTYPE html> 
<html lang="ru"> 


<head> 


<meta charset="utf-8"> 


<title>llpnumep использования текстовых Nnoneğ</title> 


<script> 


function frmSubmit() { 


var email = document.getElementById ("email"); 

var passwd = docwument.getElementById ("passwd"); 
email.style.backgroundColor = "#FFFFFF"; 

passwd. style.backgroundColor = "#FFFFFF"; 

var р = /^[а-20-9 .-]+@ ([а-20-9-]+\.)+[а-2] {2,6}$/1; 


мак ѕіг 


= email.value; 


if (!p.test(str)) { 
міпаои.а1егі ("Неверный адрес E-mail"); 


email.style.backgroundColor = "#FFE4E1"; 


email.select(); 


return false; 


} 


р = /^[а-20-9_.-]{6,16}$/1; 

str = раз5ма.уа1ае; 

if (!p.test(str)) { 
міпаои.а1егі ("Неверный пароль"); 
passwd.style.backgroundColor = "#FFE4E1"; 
passwd.select (); 


return false; 


} 


var msg = "Вы ввели следующие данные:\п\п E-mail: "; 


msg += email.value + "Тіп Пароль: " + passwd.value; 
міпаом.а1ег+ (msg); 


return 


} 


гие; 


function frmReset() { 
.getElementById ("email") .style.backgroundColor = "#FFFFFF"; 
.getElementById ("passwd") .style.backgroundColor = "#FFFFFF"; 


documen 
documen 


} 


window.onload = function() { 


documen 
documen 


getElementById ("email2").readOnly = true; 
.getElementById ("email") .опКеуцр = function () 


document .getElementById ("email2").value = 


} 
</script> 
</head> 


document .getElementById ("ета11") .уа1ае; 


{ 
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<роау> 
<form action="test.php" method="GET" name="frm" id="frm" 
onsubmit="return frmSubmit ()" onreset="frmReset () "> 
<div> 


E-mail:<br> 
<input type="text" name="email" id="email" 

style="background-color: #FFFFFF"><br> 
овтор E-mail:<br> 


<input type="text" name="email2" id="email2" 
style="þbackground-color: #ЕЕЕЕЕЕ"><рг> 
ароль:<рг> 


<input type="password" папе-"раззма" ій-"раззма" 
веуіе-"Баскагоцпа-со1ог: #ЕЕЕЕЕЕ"><рг> 


<input type="reset" уа1ае="Очистить"> 


<input type="submit" уа1ае="Отправить"> 
</div> 

</form> 

</body> 

</html> 


3.15.7. Поле для ввода многострочного текста 


Поле для ввода многострочного текста, определяемое парным тегом <textarea>, 
поддерживает те же свойства, методы и события, что и простое поле ввода 
(см. разд. 3.15.6), за исключением свойства maxLength. Кроме того, поддерживается 
еше одно свойство: wrap — режим переноса слов. Оно может принимать следую- 
щие значения: 


П off — не переносить слова; 
O physical — слова переносятся как на экране, так и при передаче данных серверу; 


П virtual — слова переносятся только на экране, но не при передаче данных Cep- 
веру. 

Для примера рассмотрим возможность добавления слов из текстового поля в поле 
для ввода многострочного текста (листинг 3.62). Добавить слово можно с помощью 
кнопки Добавить слово или нажатием клавиши <Ещег>. Так как по умолчанию 
нажатие клавиши <Enter> приводит к отправке данных формы, то всплывание 
события прерывается. При нажатии кнопки Значение поля выводится текущее 
значение тега <textarea>. 


Листинг 3.62. Добавление слов из текстового поля в поле <textarea> 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 


356 


<Е1Е1е>Пример использования поля &lt;TEXTAREAsgt;</title> 


<script> 
function frmSubmit() { 


var v = document.getElementById("txt1").value; 
window.alert ("Текущ значение: \п" + v); 


return false; 
} 
function btnClick() { 
var txt2 = document.getElementById("txt2"); 
var text = txt2.value; 
if (text != "") { 


document . деЕЕ1етепЕВута ("txt1").value += text + "\n"; 


txt2.value = ""; 
txt2.focus (); 
} 
else { 
window.alert ("Поле не заполнено!"); 
txt2.focus (); 


} 


window.onload = function() { 


document .getElementById ("txt2").onkeypress = function (е) 


е = е || window.event; 
1Е (е.КеүСоде == 13) { 
репСііск(); 


if (e.preventDefault) e.preventDefault (); 
else e.returnValue = false; 


} 

</script> 

</head> 

<body> 

<form action="test.php" method="GET" name="frm" id="frm" 


onsubmit="return frmSubmit () "> 
<div> 
Слово: <br> 
<input type="text" name="txt2" id="txt2"><br> 


<textarea name="txt1" id="txt1" cols="15" rows="10"></textarea> 


<br><input type="button" уа1ае="Добавить слово" 
onclick="return btnClick()"><br> 
<input type="submit" value=" Значение поля "> 
</div> 
</form> 
</body> 
</html> 
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3.15.8. Список с возможными значениями 


Объекту списка присущи следующие свойства: 


П disabled — запрет доступа: если задано значение true, то список является неак- 
тивным (отображается серым цветом); 


П form— ссылка на форму, в которой находится элемент; 
С 1епдеҺһ-- количество пунктов в списке (доступно и для записи); 


O multiple — разрешение множественного выделения: true, если из списка можно 
выбрать сразу несколько элементов одновременно; 


name — имя элемента; 
options — ссылка на коллекцию пунктов в списке; 
selectedOptions — ссылка на коллекцию выбранных пунктов списка; 


selectedIndex — номер выбранного пункта (нумерация начинается с нуля); 


size — число одновременно видимых элементов списка; 


ооо,оооо 


type — тип элемента формы (select-multiple ИЛИ ѕе1есі-опе); 


O value — значение пункта, выбранного в списке. 


Пункту списка присущи следующие свойства: 


O defaultSelected пункт списка, выбранный изначально; 


О іһаех — номер пункта в списке; 


O selected — признак выделения: true, если пункт выбран в списке; 


П аіѕаріеа — если задано значение true, то пункт списка является неактивным 
(отображается серым цветом); 


O text — текст пункта списка; 


O value — значение пункта, выбранного в списке. 


Методы: 

С blur() — убирает фокус ввода с текущего элемента формы; 
П ғосиѕ () — помещает фокус на текущий элемент формы. 
События: 


П onblur — наступает при потере фокуса элементом формы; 
С onchange — происходит после выбора нового пункта списка; 
П onfocus — наступает при получении фокуса ввода элементом формы. 


Рассмотрим пример работы со списками. Документ, приведенный в листинге 3.63, 
демонстрирует следующие возможности: 


O добавление нового пункта списка. При заполнении первого поля и нажатии кла- 
виши <Ещег> фокус ввода перемещается во второе поле. При заполнении второ- 
го поля и нажатии клавиши <Ещег> введенные значения добавляются в список. 
Вместо клавиши <Ещег> можно воспользоваться кнопкой Добавить; 
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С получение всех выбранных значений из списка с возможностью множественного 
выбора; 


П применение взаимосвязанных списков и получение значения выбранного пунк- 
та. При выборе элемента в первом списке соответствующие элементы загружа- 
ются во второй список. При выборе элемента во втором списке выводится 
сообщение со значением выбранного пункта; 


П применение списков вместо гиперссылок. При выборе элемента списка загружа- 
ется \еБ-страница, находящаяся по указанному в параметре value ОКІ-адресу. 


Листинг 3.63. Обработка списков 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<title>llpmmep обработки cnncKoB</title> 


</head> 

<body> 

<form action="test.php" method="GET" name="frm" id="frm"> 
<!-- Добавление пункта в список --> 

<script> 


function addOption() { 

var txt1 = document.getElementById("txt1"); 

var txt2 = document.getElementById("txt2"); 

var select1 = document .getElementById ("ѕеїіесі1"); 

if (txtl.value != "" && txt2.value != "") { 
var i = select1.length++; 
select1.options[i].text = txt1.value; 
select1.options[i].value = txt2.value; 
txtl.value = ""; 


txt2.value = ""; 
іхё1.ҒЁосиѕ (); 
} 


еізе 


window.alert ("Поле не заполнено!"); 
іхЕ1.ҒЁосиѕ (); 


} 
function press1 (e) { 
е = е || window.event; 
if (e.keyCode == 13) { 
document .getElementById ("Ехі2") .Ғосиѕ (); 
if (e.preventDefault) e.preventDefault (); 
else e.returnValue = false; 
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function ргеѕѕ2 (е) { 
е = е || window.event; 
if (e.keyCode == 13) { 
addOption (); 
if (e.preventDefault) e.preventDefault (); 
else e.returnValue = false; 


} 

</script> 

<div> 

<р>Добавление пункта в список:</р><рг><рг> 


Текст пункта:<рү> 

<input type="text" name="txt1" id="txt1" опкеургеѕѕ="ргеѕѕ1 (еуепі) "> 
<рг>Значение NyHKTA:<br> 

<input type="text" name="txt2" id="txt2" onkeypress="press2 (event)"> 
<br><select name="select1" id="select1"> 

</select><br> 

<input type="button" уа1ае="Добавить" onclick="addOption ()"><br><br> 


<!-- Список CO множественным выбором --> 


<script> 
function multi() { 
var msg = ""; 
var select2 = document.getElementById ("select2"); 
if (select2.selectedOptions) { 
var obj = select2.selectedOptions; 


var count = obj.length; 
Жок (var і = 0; і < county 1++) { 


msg += ору [1] .уа1ае + 112 
msg += ору [і].ёехі + "Ап"; 


} 
else { 
var count = select2.length; 
Жок (мас і = 0; 1 < соџпі; 1++) { 
if (select2.options[i].selected) { 
msg += select2.options[i].value + " - "; 
msg += select2.options[i].text + "\п"; 


} 
window.alert (msg); 
} 
</script> 
<р>Список со множественным выбором:</р><рг><рг> 
<select папе-"зе1есі2" id="select2" з1хе="5" multiple> 
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<option уа1ае="1" ѕе1есіеа>Элемент1</орііоп> 


<option уа10џе="2">Элемент2</орііоп> 

<option уа1ае="3">Элемент3</орЕ1оп> 

<option уа1џе="4">Элемент4</орііоп> 

<option уа1џе="5">Элемент5</орііоп> 

<option уа1џе="6">Элементб</орііоп> 
</select><br> 

<input type="button" value="83Hauenna списка" 

onclick="multi ()"><br><br> 


<!-- Взаимосвязанные списки --> 

<script> 

var arr = []; 

arr[1] = | "Temal Элемент1", "Temal Элемент2" 1; 

arr[2] = [ "Тема2 Элемент1", "Тема? Элемент2", "Тема2 Элемент3" 1; 
var valuel = (1; 

уа1ае1 [1] = Баа: 

value1[2] = З Ат TSE р 


function сһапде1 () { 
var index = document.getElementById ("select3").value; 
var select4 = document.getElementById ("select4"); 


var count = arr [index] .length; 
select4.length = count; 
for (i = 0; i < count; i++) { 


select4.options[i].value = valuel [index] [1]; 
select4.options[i].text = arr [index] [1]; 


} 
function change2() { 
var sel = document.getElementById("select4"); 


var msg = "Значение: " + sel.options[sel.selectedIndex].value; 


msg += "\nTekcT: " + sel.options [sel.selectedIndex].text; 
window.alert (msg); 

} 

</script> 

<р>Взаимосвязанные CNNCKN :</b><br><br> 


<select name="select3" id="select3" size="5" опсһапде-"сһапде1()"> 
<option value="1">Temal</option> 

<option value="2">Tema2</option> 

</select><br> 

<select name="select4" id="select4" опсһапде="сһапде2 () "> 


<option value="1" selected>Temal Элемент1</орііоп> 


<option value="2">Temal Элемент2</орЕ1оп> 
</select><br><br> 
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<!-- Переход на указанный сайт --> 


<р>Переход на указанный сайт:</р><рг><рг> 

<select 

onchange="top.location.href=this.options [this.selectedIndex] .value; "> 
<option value="http://www.mail.ru/" ѕе1есіеа>Национальная почта Mail.ru 
</option> 

<option value="http://www. гапр1ег. ги/">Рамблер</орііоп> 

</select> 

</div> 

</form> 

</body> 

</html> 


3.15.9. Флажок n переключатели 


Флажки и переключатели имеют следуюшие свойства: 
С value — значение текущего элемента формы; 


O checked — признак отметки: true, если флажок или переключатель находится во 
включенном состоянии; 


O defaultChecked — флажок или переключатель установлен по умолчанию. Воз- 
вращает true ИЛИ false; 


П disabled — признак запрета: если задано значение true, то элемент является HE- 
активным (отображается серым цветом); 


O indeterminate — если true, ТО флажок находится в неопределенном состоянии, 
И false — в противном случае; 


П form— ссылка на форму, в которой находится элемент; 
П name — имя элемента; 


С type — тип элемента формы. 


Методы: 

П blur() — убирает фокус ввода с текущего элемента формы; 
П ғосиѕ () — помещает фокус на текущий элемент формы. 
События: 


П onblur — наступает при потере фокуса элементом формы; 
П onclick — возникает при выборе элемента; 
П onfocus — происходит при получении фокуса ввода элементом формы. 


Чтобы найти выбранный элемент-переключатель в группе, необходимо перебрать 
все переключатели в цикле. Получить значение выбранного переключателя можно, 
указав внутри квадратных скобок индекс элемента в группе. Рассмотрим это на 
примере (листинг 3.64). 
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Листинг 3.64. Обработка флажков и переключателей 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 


<title>llpnmep использования флажков и переключателей</%ғ1%1е> 


<script> 
function btnClick() { 
var msg = ""; 
if (document.getElementById ("check1").checked) { 
msg = "Флажок установлен\п"; 
msg += "Значение: " + document.getElementById ("check1").value+"\n"; 
} 
else { 
msg = "Флажок CHAT\N"; 


} 
var valuel = ""; 
var count = document.frm.radiol.length; 
Ғог (і = 0; 1 < соцпіё; 1++) { 
if (document.frm.radiol[i].checked) { 
valuel1 = document. frm.radiol[i].value; 
break; 


} 


if (уа1ае1 == "male") { 


msg += ол: Мужской\п"; 
} 


else { 


msg += ол: Женский\п"; 
} 


window.alert (msg); 


} 
</script> 
</head> 
<body> 
<form action="test.php" method="GET" name="frm" id="frm"> 
<div> 


<input type="checkbox" name="check1" id="check1" value="yes" checked> 
Текст<рг><рг> 

Укажите ваш пол:<рг> 

<input type="radio" name="radio1" id="radiol" value="male" 
сһескеа>Мужской 

<input type="radio" паме="гааіо1" ій-"тадіо2" уа1ае="Еета1е">Женский 
<br><br> 
<input type="button" уа1ае="Вывести значения" onclick="btnClick()"> 
</div> 
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</form> 
</body> 
</html> 


3.15.10. Кнопки. Обработка нажатия кнопки 


Кнопки поддерживают следующие свойства: 
С value — текст, отображаемый на кнопке; 


П disabled — признак запрета: если задано значение true, то кнопка является HE- 
активной (отображается серым цветом); 


П form— ссылка на форму, в которой находится элемент; 
П name — имя элемента; 
П type — тип элемента формы. 


Методы традиционны: 


П blur() — убирает фокус ввода с текущего элемента формы; 
П ғосиѕ () — помещает фокус на текущий элемент формы. 
События: 


П onblur — наступает при потере фокуса элементом формы; 
С опсііск-- возникает при нажатии кнопки; 
П onfocus — происходит при получении фокуса ввода элементом формы. 


В приведенном далее примере (листинг 3.65) кнопка изначально не активна. При 
вводе в текстовое поле кнопка активируется. По нажатию кнопки текст, введенный 
в текстовое поле, отображается на кнопке, текстовое поле очищается, и кнопка 
деактивируется. 


Листинг 3.65. Обработка нажатия кнопки 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 


<title>llpumep использования KHONOK</title> 
<script> 
function keyUp() { 


if (document.getElementById("text1").value == "") { 


document .getElementById ("button1").disabled = true; 


} 
else { 
document .getElementById ("button1").disabled = false; 
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function btnClick() { 
document .getElementById ("button1").value = 


document .getElementById("text1").value; 
document .getElementById ("text1").value = ""; 
document .getElementById ("button1").disabled = true; 


} 

</script> 

</head> 

<body> 

<form action="test.php" method="GET" onsubmit="return false;"> 
<div> 


<input type="text" name="text1" id="text1" onkeyup="keyUp ()"><br> 
<input type="button" уа1ае="Изменить текст на кнопке" 
onclick="btnClick()" id="þbutton1" disabled> 
</div> 
</form> 
</body> 
</html> 


Обычная командная кнопка может быть вставлена в УУер-страницу не только с по- 
мощью тега <input>, но и с помощью парного тега <button>. При использовании 
этого тега текст на кнопке можно сделать цветным, а также можно задать клавишу 
быстрого доступа. 


Переделаем пример из листинга 3.65 и вместо тега <input> используем тег <button> 
(листинг 3.66). 


Листинг 3.66. Использование тега <button> 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 


<title>llpnmep использования Tera &lt;buttonggt;</title> 
<script> 
function keyUp() { 


if (document.getElementById("text1").value == "") { 
document .getElementById ("button1").disabled = true; 


} 
else { 
document .getElementById ("button1").disabled = false; 


} 
function btnClick() { 
document .getElementById ("5рап1") .textContent = 


document .getElementById ("text1").value; 


Основы JavaScript. Создаем страницы, реагирующие на действия пользователей 365 


} 


document .getElementById ("text1").value = ""; 


document .getElementById ("button1").disabled = true; 


</script> 

</head> 

<body> 

<form action="test.php" method="GET" onsubmit="return false;"> 
<div> 


<input type="text" name="text1" id="text1" onkeyup="keyUp () "><рг> 
<button onclick="btnClick()" id="button1" disabled> 
<span id="span1" style="color: геа"> 


<span style="text-decoration: underline">T</span>ekcT красного цвета 
</span></button> 

</div> 

</form> 

</body> 

</html> 


3.15.11. Работа c элементами управления 


Элементы управления поддерживают следующие вновь введенные свойства: 


О 
o 


autocomplete — аналогично одноименному свойству формы; 


autofocus -- признак того, должен ли этот элемент управления получить фокус 
ввода сразу после загрузки страницы. Значение true активизирует автоматиче- 
ское получение фокуса ввода, значение false деактивирует его; 


пах -- максимальное значение, которое можно указать в поле ввода числа или 
выбора значения из диапазона; 


min — Минимальное значение, которое можно указать в поле ввода числа или 
выбора значения из диапазона; 


всер--- интервал между значениями, допустимыми для занесения в поле ввода 
числа или выбора значения из диапазона; 


pattern — регулярное выражение, определяющее формат заносимого в поле 
ввода значения и записанное в виде строки; 


placeholder — текст подсказки, ВЫВОДИМОЙ прямо в поле ввода, в виде строки; 


required — признак того, является ли элемент управления обязательным ДЛЯ 
ввода: true — является, false — не является; 


selectionStart — номер первого символа выделенного в поле ввода или в об- 
ласти редактирования фрагмента текста (в виде числа). Если текст не выделен, 
возвращает номер символа, на котором стоит текстовый курсор; 


selectionEnd — номер последнего символа выделенного фрагмента текста 
(в виде числа). Если текст не выделен, возвращает номер символа, на котором 
стоит текстовый курсор; 
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П validationMessage — возвращает текст сообщения (в виде строки) о некорректно 
занесенном в поле ввода значении; 


п validity — возвращает сведения об ошибках, допущенных посетителем при за- 
несении значения в поле ввода. Представляет собой объект класса ValidityState, 
поддерживающего следующие доступные только для чтения свойства: 


Ф þÞadInput — true, если введенное посетителем значение неполное; 


® patternMismatch — true, если введенное значение не совпадает с заданным 
шаблоном (регулярным выражением, занесенным в свойство pattern); 


Ф rangeOverflow true, если введенное число больше указанного максималь- 
ного значения, 


Ф гапое0раегЕ1ом — true, если введенное число меньше указанного минималь- 
ного значения; 


e stepMismatch — true, если введенное число не укладывается в заданный 
интервал; 


Ф со010п4-- true, если введенная строка слишком длинная; 


e typeMismatch— true, если введенное значение не соответствует требуемому 
типу (т. е. не является числом, интернет-адресом, адресом электронной почты 
ит. п.); 


Ф valueMissing — true, если обязательное поле пустое; 


e customError — true, если было задано иное сообщение об ошибке ввода дан- 
ных (как это сделать, будет описано далее); 


èe valid— true, если введенное значение полностью корректно (и все приве- 
денные ранее свойства хранят значение false); 


O willValidate — возврашает true, если значение, присутствуюшее в этом элемен- 
те управления, будет проверяться на корректность. Для элементов, недоступных 
для посетителя и доступных лишь для чтения, возвращается false. 


3.15.12. Расширенная проверка значения, 
занесенного в поле ввода 


Мы уже знаем, что DOM 3 оснастила поля ввода богатым набором инструментов 
для проверки занесенных в них данных на корректность. Теперь, если мы хотим 
удостовериться, что посетитель ввел в поле, скажем, число, а не что-то иное, мы 
создадим поле ввода числа и укажем для него параметры, которым должно удовле- 
творять это число, — об остальном позаботится сам \МеБ-браузер. 


Если мы хотим вывести свое собственное сообщение об ошибке прямо под эле- 
ментом управления, в который было введено некорректное значение, как это 
делает сам \!еБ-браузер, то зададим это сообщение с помощью метода 
setCustomValidity (<Сообщение>) нужного элемента управления. Как только мы 
зададим для элемента управления свое сообщение об ошибке, вызвав метод 
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setCustomValidity(), занесенное в этот элемент значение будет считаться некор- 
ректным. \МеБ-браузер выведет заданное нами сообщение на экран, а данные OT- 
правлены не будут. 


Чтобы пометить введенное в элемент управления значение как корректное, доста- 
точно вызвать этот метод, передав ему в качестве параметра пустую строку. 


Пример кода, выводящего сообщение об ошибке ввода подобным образом, показан 
в листинге 3.67. 


Листинг 3.67. Пример вывода сообщения об ошибке 


<input type="text" id="txtYear"> 
<script> 
var txtYear = document.getElementById("txtYear"); 
txtYear.addEventListener ("input", function() { 
var n = parseInt (txtYear.value, 10); 
if (!isNaN(n)) { 
if (n < 2000) { 
txtYear.setCustomValidity ( 
"Значение года не должно быть меньше 2000"); 


) 
else ( 
txtYear.setCustomValidity(""); 


} 
}, false); 
</script> 


3.16. Работа c графическими изображениями 


Для управления графическими изображениями DOM 3 предоставляет нам три 
дополнительных свойства, поддерживаемые объектом-изображением: 


П complete — возвращает true, если изображение было полностью загружено, и 
false — в противном случае; 


С naturalWidth— возвращает ширину загруженного изображения (в пикселах). 
Значение отличается от значения параметра width, который задает отображае- 
мую ширину изображения; 


С naturalHeight — возвращает высоту загруженного изображения (в пикселах). 
Значение отличается от значения параметра height, который задает отображае- 
мую высоту изображения. 


Пример: 
<img src="photo.jpg" width="200" alt="" id="img"> 


<script> 
window.onload = function() { 
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var img = document .getElementById ("img"); 


console.log (img.complete); 
console.log (img.naturalWidth) ; 


console.log (img.naturalHeight) ; 
img.width) ; 


console.log (img.height); 


( 
( 
console.log ( 
( 


} 
</вскіре> 


3.17. Работа с мультимедиа 


Элементы аудио- и видеороликов, помещенных на страницу средствами HTML 5, 
поддерживают расширенный набор программных инструментов, который довольно 
велик. 


3.17.1. Свойства аудио- и видеороликов 


Начнем, как обычно, со списка дополнительных свойств: 
O src— интернет-адрес воспроизводящегося в текущий момент ролика; 


П currentSrc— возвращает интернет-адрес воспроизводящегося в текущий MO- 
мент ролика. Может отличаться от интернет-адреса, заданного в самом теге, ес- 
ли ролик предоставляется серверным приложением, автоматически выбираю- 
щим мультимедийный файл в зависимости от параметров клиентского компью- 
тера; 


п poster — интернет-адрес файла заставки для видео; 


П рге1оаа-- признак, следует ли выполнять предварительную загрузку ролика. 
Значением этого свойства должна быть одна из строк: 


e "попе" — не выполнять предзагрузку; 

e "metadata" — загрузить только самое начало файла, где хранятся сведения 
о ролике; 

e "auto" — загрузить весь файл (значение по умолчанию); 


С readyState — возвращает состояние загрузки ролика (в виде числа): 
e 0 — загрузка еще не началась; 
е 1 — загружен лишь заголовок файла, хранящий сведения о самом ролике; 


èe 2 — загружены данные, достаточные для воспроизведения текущего кадра, 
но для воспроизведения следующих кадров данных недостаточно; 


èe 3-- загружены данные, достаточные для воспроизведения текущего и сле- 
дующих кадров; 


èe 4-- загружены данные, достаточные для бесперебойного воспроизведения 
всего ролика; 
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П networkState — возвращает текущее состояние загрузки ролика (в виде числа): 
e 0 — загрузка еще не началась; 
• 1 — ролик уже загружен; 
е 2 — идет загрузка ролика; 


e з — файл с роликом отсутствует на сервере; 


о 


autoplay — признак, запустится ли воспроизведение ролика сразу после его 
загрузки: сгче-- запустится, false — не запустится; 


width — ширина видеоролика (в пикселах); 
height — высота видеоролика (в пикселах); 
videoWidth — возвращает ширину загруженного видеоролика (в пикселах); 


videoHeight — возвращает высоту загруженного видеоролика (в пикселах); 


onaniaa 


controls — признак, будут ли на экране присутствовать элементы управления 
воспроизведением ролика: true — будут присутствовать, false — не будут при- 
сутствовать; 


О ended — возвращает true, если воспроизведение ролика закончилось, и false — 
в противном случае; 


O duration — возврашает продолжительность ролика B виде числа в секундах; 


O currentTime - текушая позиция воспроизведения ролика B виде числа в секун- 
дах, 


С ісор-- признак, будет ли ролик воспроизводиться бесконечно: true — ролик 
воспроизводится бесконечно, false — ролик будет воспроизведен всего один 
раз; 


п paused — признак, приостановлено ли воспроизведение ролика в текущий MO- 
мент: true — приостановлено, false — не приостановлено; 


П playbackRate — текущая скорость воспроизведения ролика. Значение должно 
представлять собой число с плавающей точкой, которое будет умножено на зна- 
чение скорости воспроизведения, полученной из файла с роликом: положитель- 
ные значения задают воспроизведение в прямом порядке, отрицательные — 
в обратном; 


П volume — громкость звука. Значение должно представлять собой число с пла- 
вающей точкой от о (звук отсутствует) до 1 (максимальная громкость); 


С muted — признак, приглушен ли звук в настоящий момент: true — приглушен, 
false — не приглушен; 


o seeking — возвращает true, если B настояший момент посетитель меняет пози- 
цию воспроизведения ролика, и false — в противном случае. 
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3.17.2. Методы аудио- и видеороликов 


Метод сапР1ауТуре (<МІМЕ-тип>) позволяет узнать, поддерживает ли Web-6paysep 
воспроизведение роликов указанного формата. МІМЕ-тип формата ролика указы- 
вается в виде строки. Метод возвращает одно из следующих строковых значений: 


С "probably" — скорее всего, поддерживает; 
С "maybe" — возможно, поддерживает; 
С "" (пустая строка) — гарантированно не поддерживает. 


Вот еще три метода. не принимающие параметров и не возвращающие результат: 


O 1оаа() — выполняет повторную загрузку ролика; 
п рачзе() — приостанавливает воспроизведение ролика; 
o play () — запускает или возобновляет воспроизведение ролика. 


3.17.3. События аудио- и видеороликов 


Приведем события аудио- и видеороликов: 
П onabort — возникает, когда посетитель прерывает загрузку файла с роликом; 


С опсапр1ау — возникает, если \!еБ-браузер получил достаточно данных, чтобы, 
по крайней мере, начать воспроизведение ролика, однако в будущем возможны 
приостановки воспроизведения для подгрузки данных; 


П oncanplaythrough — возникает, если \Меб-браузер получил достаточно данных, 
чтобы начать воспроизведение ролика без приостановок для подгрузки данных; 


С ondurationchange — возникает, когда Web-6paysep получает значение продолжи- 
тельности ролика или когда это значение почему-то изменяется; 


С опепреіей-- возникает при выгрузке файла ролика, что может произойти, Ha- 
пример, при вызове метода load (); 


O onended — возникает, если воспроизведение ролика закончилось; 


С опеггог — возникает при прерывании загрузки файла с роликом в результате 
ошибки скрипта или сетевого сбоя; 


0 onloadeddata — возникает, если \МеБ-браузер загрузил достаточно данных для 
вывода на экран первого кадра, но не для начала воспроизведения ролика; 


O onloadedmetadata — возникает после загрузки метаданных; 


П onloadstart — возникает, когда \МеБ-браузер только начинает загрузку файла 
с роликом; 


п опрацѕе — возникает, когда воспроизведение ролика приостанавливается; 
п опр1ау — Возникает после начала или возобновления воспроизведения ролика; 


П опр1ауіпд — возникает, когда \МеБ-браузер получает достаточно данных, чтобы 
возобновить воспроизведение приостановленного ролика; 
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П опргодгеѕѕ — периодически возникает в процессе загрузки УУеһ-браузером 
мультимедийного файла; 


П опгагесһапде — возникает при изменении значения скорости воспроизведения 
ролика; 


O onseeked — возникает по завершении изменения текущей позиции воспроизве- 
дения ролика; 


o onseeking — возникает после начала изменения текущей позиции воспроизведе- 
ния ролика; 


О onstalled — возникает через три секунды после остановки процесса подгрузки 
очередной порции данных из мультимедийного файла. Обычно означает, что 
дальнейшая подгрузка файла с роликом невозможна; 


п ontimeupdate — возникает при изменении текущей позиции воспроизведения; 


o onvolumechange — возникает при изменении значения громкости, приглушении 
звука или восстановления его после приглушения; 


С опчаісіпд — возникает, когда воспроизведение ролика приостанавливается для 
подгрузки очередной порции данных. 


3.18. Холст в НТМІ. 5. 
Программируемая графика 
В главе 1 упоминалось, что язык НТМИ 5 предлагает довольно богатые возможно- 


сти по выводу на страницу произвольной графики, рисуемой программно, в скрип- 
те. Настала пора узнать, как это делается. 


3.18.1. Тег <сапуа$> 


Холст создается с помощью парного тега <сапуаз>, имеющего следующие параметры: 
С чі4сһ-- ширина холста; 

П height — высота холста. 

Если параметры не указаны, то создается холст с размерами 300х150 пикселов. 


<сапуаѕ іа="спу" width="400" height="300"> 
<р>Ваш Мер-браузер не поддерживает элемент сапуаз</р> 


</сапуаѕ> 


3.18.2. Создание контекста рисования 


Создав на странице сам холст, мы можем получить его контекст рисования -- 
набор инструментов, применяемых для рисования на нем. Для этого используется 
метод getContext ("2а"): 


var оСапуаз = document.getElementById ("спу"); 


var сЕхСапуаз = оСапуаѕ.деіСопіехі ("2а"); 
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Контекст рисования представляется объектом класса CanvasRenderingContext2D. Все 
операции по рисованию выполняются с применением его свойств и методов, кото- 
рые мы далее рассмотрим. 


Получить ссылку на объект холста позволяет свойство canvas: 


console. log (сіхСапуаѕ.сапуаѕ.һеідћі); // 300 


3.18.3. Изменение характеристик заливки 


Свойство fillStyle определяет цвет заливки, который может быть задан любым 
поддерживаемым CSS способом. По умолчанию цвет заливки черный. 


п Пример указания синего цвета заливки и рисования прямоугольника: 
ctxCanvas.fillStyle = "rgb(0, 0, 255)"; 
сёхСапуаѕ.Ёі11Весі (50, 50, 200, 200); 

п Пример указания полупрозрачного красного цвета и рисования прямоугольника: 


ctxCanvas.fillStyle = "гора (255, 0, 0, 0.5)"; 
сёхСапуаѕ.#Ғі11Кесі (100, 100, 150, 150); 


3.18.4. Изменение характеристик обводки 


Цвет обводки задается с помощью свойства strokeStyle. Сам цвет может быть 
указан любым способом, поддерживаемым CSS. По умолчанию цвет обводки Yep- 
НЫЙ. 


o Пример указания синего цвета обводки и рисования прямоугольника: 


ctxCanvas.strokeStyle = "rgb(0, 0, 255)"; 
ctxCanvas.strokeRect (50, 50, 200, 200); 


С Пример указания полупрозрачного красного цвета обводки и рисования прямо- 
угольника: 


ctxCanvas.strokeStyle = "гора (255, 0, 0, 0.5)"; 
ctxCanvas.strokeRect (100, 100, 150, 150); 


Управлять характеристиками обводки позволяют следующие свойства и методы: 
П linewidth — задает толщину линий обводки (в пикселах): 


ctxCanvas.lineWidth = 20; 
ctxCanvas.strokeRect (50, 50, 200, 200); 


С 1:лесар — задает форму окончания линии: 
e "square" — квадратные концы (прибавляются к длине линии); 
e "butt" — концы никак не оформляются; значение по умолчанию; 


e "round" — закругленные концы (прибавляются к длине линии). 
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Пример рисования прямой линии с закругленными концами: 


сіхСапуаз. 
сіхСапуаз. 


сіхСапуаз 


сіхСапуаѕ 


сіхСапуаѕ. 
сіхСапуаз. 


O lineJoin— задает форму окончания в месте соединения двух ЛИНИЙ обводки: 


редіпРаїћ (); 
lineWidth = 10; 
.ІіпеСар = "round"; 
.moveTo (20, 20); 
11пеТо(180, 20); 
stroke (); 


"miter" — обычные углы; значение по умолчанию; 
"bevel" — скошенные углы; 
"round" — закругленные углы. 


Пример рисования треугольника со скругленными углами: 


ооо O/O 


СхСапуа$ 
схСапуав 


СхСапуаз 


схСапуав 


СхСапуаз 


схСапуав. 


схСапуав. 
схСапуаз. 


.beginPath (); 
.lineWidth = 15; 
lineJoin = "round"; 
.moveTo (200, 20); 
lineTo(20, 100); 
lineTo (200, 100); 
.closePath (); 
¿stroke (); 
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O miterLimit — задает ограничение длины угла, когда для свойства lineJoin зада- 
но значение "miter". Значение по умолчанию: 10 пикселов. Если значение пре- 
вышено, то угол будет скошенным; 


С lineDashoffset — задает смещение начала пунктирной обводки. Значение по 
умолчанию: 0; 


С ѕебіпераѕћ (<Значения>) — задает значения для пунктирной линии. Значения 
указываются в виде массива. Четные индексы задают длину штриха, а нечет- 
ные — длину пропуска. 


Пример рисования пунктирной линии: 


с 
с 
с 
с 
с 
с 
с 
с 


СхСапуаз 


схСапуав 
СхСапуа$ 


схСапуав. 
схСапуав. 
схСапуаз. 


схСапуав. 
схСапуаз. 


.beginPath (); 


lineWidth = 5; 
lineDashOffset = 10; 
setLineDash([15.0, 10.01); 


.miterLimit = 20; 


.moveTo (200, 20); 
lineTo(50, 200); 
stroke (); 


Чтобы сделать следующую линию опять сплошной, достаточно передать в метод 


set 


Og 


LineDash () пустой массив; 


tLineDash () 


возвращает массив со значениями для пунктирной ЛИНИИ. 
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3.18.5. Рисование прямоугольников 


Для рисования прямоугольников предназначены следуюцие методы: 


С fillRect() — рисует прямоугольник, используя характеристики заливки. Фор- 
мат метода: 


fillRect (<Х>, <Ү>, <Ширина>, <Высота>) 
Параметры <Х> и <Y> задают координаты левого верхнего угла прямоугольника. 
Положительная ось х направлена вправо, а положительная ось у — вниз: 


сіхСапуаѕ.#і115іуІе = "гор (0, 0, 255)"; 
сёхСапуаѕ.Ёі11Весі (50, 50, 200, 200); 


С strokeRect() — рисует прямоугольник, используя характеристики обводки. 
Формат метода: 


[0] 


сгокеКесі (<Х>, <Ү>, <Ширина>, <Высота>) 


Пример: 


ctxCanvas.strokeStyle = "rgb(0, 0, 255)"; 
ctxCanvas.strokeRect (50, 50, 200, 200); 


3.18.6. Очистка прямоугольной области 

или всего холста 

Метод с1еагЕесе() очищает заданную прямоугольную область от любой присутст- 

вовавшей там графики. Формат метода: 

clearRect (<X>, <Ү>, <Ширина>, <Высота>) 

O Пример рисования прямоугольника с заливкой и очистки прямоугольной облас- 
ти внутри него: 
сёхСапуаѕ.Ёі11Весі (0, 0, 400, 300); 
сіхСапуаѕ.с1ІеагКесі (100, 100, 200, 100); 

п Пример рисования прямоугольника с заливкой, очистки всего холста и опять 
рисования прямоугольника с заливкой: 


сіхСапуаѕ.#і11Кесї (0, 0, 400, 300); 

ctxCanvas.clearRect (0, 0, ctxCanvas.canvas.width, 
ctxCanvas.canvas.height); 

ctxCanvas.fillRect (50, 50, 100, 100); 


3.18.7. Вывод текста 


Свойство font задает параметры шрифта, которым будет выводиться текст. Эти па- 
раметры указывают в том же формате, что и у значения атрибута CSS font, в виде 
строки: 


ctxCanvas.font = "italic 16рі Verdana"; 
ctxCanvas .strokeText ("JavaScript", 200, 50, 100); 
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Для вывода текста используются следуюцие методы: 


O сегокеТехЕ() — выводит текст, используя характеристики обводки. Формат 
метода: 


strokeText (<Текст>, <Х>, <Ү>[, <Максимальная ширина>]) 


С первыми тремя параметрами все ясно. Четвертый, необязательный, параметр 
определяет максимальное значение ширины, которую может принять выводи- 
мый текст. Если выводимый текст получается шире, \!еБ-браузер выводит его 
либо шрифтом с уменьшенной шириной символов (если выбранный шрифт под- 
держивает такое начертание), либо шрифтом меньшего размера: 


ctxCanvas .strokeStyle = "blue"; 
ctxCanvas.font = "italic 16pt Verdana"; 
сЕхСапуаз .strokeText ("JavaScript", 200, 50, 50); 


O fillText() — выводит текст, используя характеристики заливки. Формат метода: 


Ғ111Техе(<Текст>, <Х>, <Ү>[, <Максимальная ширина>1) 
Пример: 


ctxCanvas.fillStyle = "blue"; 
ctxCanvas.font = "italic 16pt Verdana"; 
ctxCanvas.fillText ("JavaScript", 200, 50); 


Свойство textAlign устанавливает горизонтальное выравнивание выводимого TEK- 
ста относительно точки, в которой он будет выведен. Это свойство может прини- 
мать следующие значения: 


С "left" — выравнивание по левому краю; 

п “right == выравнивание по правому краю; 

O "start" — выравнивание по левому краю, если текст выводится по направлению 
слева направо, и по правому краю в противном случае (значение по умолчанию); 

О "ела" — выравнивание по правому краю, если текст выводится по направлению 
слева направо. и по левому краю в противном случае; 

O "center" — выравнивание по центру: 
ctxCanvas.textAlign = "center"; 


ctxCanvas.fillText ("НТМІ, Css", 100, 100); 


Свойство textBaseline позволяет задать вертикальное выравнивание выводимого 
текста относительно точки, в которой он будет выведен. Доступны следующие зна- 
чения: 


С "top" — выравнивание по верху прописных букв; 

С "hanging" — выравнивание по верху строчных букв; 

С "middle" — выравнивание по средней линии строчных букв; 

С "alphabetic" — выравнивание по базовой линии букв европейских алфавитов 


(значение по умолчанию); 
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С "ideographic" — выравнивание по базовой линии иероглифических символов 
(она находится чуть ниже базовой линии букв европейских алфавитов); 


С "bottom" — выравнивание по низу букв: 


ctxCanvas.textBaseline = "bottom"; 
ctxCanvas.fillText ("НТМІ, С55", 100, 100); 


Еше нам может пригодиться метод пеазогеТехе (<Текст>), позволяющий узнать 
ширину текста. Метод возвращает объект с единственным свойством width, KOTO- 
poe и хранит ширину текста в пикселах: 


var в = "HTML, CSS, JavaScript, РНР, MySQL"; 
ctxCanvas.font = "ро1а 24pt Tahoma"; 
console. log (ctxCanvas.measureText (s).width); 


3.18.8. Вывод изображения 


Вывести изображение на холст позволяет метод drawImage (). Форматы метода: 
drawImage (<img>, <х>, <y>) 
drawĪImage (<img>, <x>, <y>, <w>, <b>) 
drawĪImage (<img>, <5х>, <sy>, <sw>, <shb>, 
<dx>, <dy>, <dw>, <аһ>) 


Первый формат выводит изображение полностью в позицию с координатами <х> 
и <y>. В параметре <img> можно указать изображение, видео или объект другого 
холста: 


<сапуаѕ id="cnv" width="400" height="300"></canvas> 
<canvas id="cnv2" width="400" height="300"></canvas> 
<img alt="" src="photo.jpg" id="img"> 

<script> 


var oCanvas = document.getElementById ("cnv"); 


var ctxCanvas = oCanvas.getContext ("2q"); 


var imgSample = new Image (); 
imgSample.src = "photo.jpg"; 
ctxCanvas .drawImage (imgSample, 0, 0); 


var oCanvas2 = document.getElementById ("спу2"); 
var ctxCanvas2 = oCanvas2.getContext ("2а"); 
ctxCanvas2.fillStyle = "rgb(0, 0, 255)"; 
ctxCanvas2.fillRect (50, 50, 200, 200); 
ctxCanvas .drawImage (оСапуав2, 0, 0); 


var oImage = document .getElementById ("img"); 
ctxCanvas2.drawImage (oImage, 0, 0); 
</script> 


Второй формат позволяет ограничить область вывода шириной (параметр <w>) 
и высотой (параметр <h>). При этом изображение может быть уменьшено или уве- 
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личено таким образом, чтобы вписаться в область. Если пропорции области не сов- 
падают с пропорциями изображения, то изображение будет растянуто или сжато 
без соблюдения пропорций: 


var img = new Іпаде(); 
img.src = "photo.jpg"; 
ctxCanvas.drawImage (img, 0, 0, 400, 100); 


Третий формат берет прямоугольную область (<sx>, <sy>, <sw>, <sh>) из изображе- 
ния и вписывает ее в прямоугольную область (<ах>, <ау>, <ам>, <4һ>) на холсте: 


var img = new Іпаде(); 

img.src = "photo.jpg"; 

сЕхСапуаз .ЧгамТтаде (img, 0.0, 0.0, 50.0, 50.0, 
200.0, 20.0, 50.0, 50.0); 

сЕхСапуаз .ЧгамТтаде (img, 0.0, 0.0, 50.0, 50.0, 
200.0, 100.0, 100.0, 100.0); 


3.18.9. Рисование траектории 


Управлять рисованием траектории позволяют следующие методы: 


П beginPath() — начинает новую траекторию; 

П поуетТо(<х>, <y>) — позволяет переместить текущую позицию в точку с указан- 
ными координатами; 

П closePath () — позволяет замкнуть текущую траекторию; 

П stroke() -- прорисовывает текущую траекторию, используя характеристики 
обводки; 

П ғ#111() — прорисовывает текущую траекторию, используя характеристики 
заливки. 


Пример рисования замкнутого треугольника с обводкой и заливкой: 


сіхСапуаѕ.#і115іуІе = "гор (0, 0, 255)"; 
ctxCanvas.strokeStyle = "гдр (255, 0, 0)"; 
ctxCanvas.lineWidth = 3; 
ctxCanvas.beginPath (); 
сЕхСапуаз .шоуеТо (20, 20); 
ctxCanvas.lineTo(100, 20); 
С 0) 
© 

с 

с 


, 


ЕхСапуаѕ.1іпетТо (100, 8 
ЕхСапуаз.с1озеРаїћ (); 
ЕхСапуаѕ.зігоке (); 
ЕхСапуав.Ғ111(); 


С 11леТо(<х>, <y>) — добавляет прямую линию к текущей траектории: 


сЕхСапуаз.11пеТо (100, 20); 


O ахсто () — добавляет дугу к текущей траектории. Формат метода: 


агсТо (<х1>, <уі>, <х2>, <у2>, <radius>) 
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Пример рисования дуги: 


ctxCanvas.strokeStyle = "rgb(0, 0, 0)"; 
ctxCanvas.lineWidth = 5; 
ctxCanvas.beginPath (); 

сЕхСапуаз .шоуеТо (100, 100); 
сіхСапуаѕ.агсТо (200, 0, 300, 100, 100); 
сіхСапуаѕ.ѕігоке (); 


П ахс() — добавляет дугу к текущей траектории. Формат метода: 


агс (<centerX>, <сепіегү>, <гадіпв>, <startAngle>, «епаАпа1е>, 
<Егае | Ға15е>) 


Параметры <centerx> И <centerY> задают координаты центра круга, параметр 
<radius> — радиус, параметр <startAngle> — начальный угол в радианах, а nma- 
раметр <endAngle> — конечный угол в радианах. Если шестой параметр имеет 
значение true, то дуга рисуется против часовой стрелки, а если false — по Yaco- 
вой стрелке. 


Тот факт, что углы задаются в радианах, несколько осложняет работу. Нам при- 
дется пересчитывать величины углов из градусов в радианы с помощью сле- 
дующего выражения: 


radians = (Math.PI / 180) * degrees; 


Здесь переменная degrees хранит значение угла в градусах, а переменная radians 
будет хранить то же значение. но в радианах. 


Пример рисования круга: 


ctxCanvas.strokeStyle = "rgb(0, 0, 0)"; 
ctxCanvas.lineWidth = 5; 

ctxCanvas.beginPath (); 

сіхСапуаѕ.агс (200, 150, 100, 0, Math.PI * 2, false); 
ctxCanvas.stroke (); 


С bezierCurveTo() -- добавляет кубическую кривую Безье к текущей траектории. 
Формат метода: 


рехіегСигуеТо (<хс1>, <ус1>, <хс2>, <ус2>, <х1>, <у1>) 


Параметры <хс1> и <ус1> задают координаты первой опорной точки, параметры 
<хс2> И <ус2> — координаты второй опорной точки, а параметры <х1> и <у1> — 
координаты конечной точки: 


ctxCanvas.beginPath (); 

сЕхСапуаз .тоуеТо (100, 100); 
сіхСапуаѕ.рехіегСигуеТо (120, 80, 160, 20, 100, 200); 
ctxCanvas.stroke (); 


С quadraticCurveTo() -- добавляет квадратичную кривую к текущей траектории. 
Формат метода: 


quadraticCurveTo (<хс>, <үс>, <хі>, <у1>) 
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Параметры <хс> И <ус> задают координаты опорной точки, а параметры <х1> и 
<у1> — координаты конечной точки: 


ctxCanvas.beginPath (); 

ctxCanvas.moveTo (100, 100); 

ctxCanvas .quadraticCurveTo (200, 100, 200, 200); 
ctxCanvas.stroke (); 


П тесе() — добавляет к траектории прямоугольник. Формат метода: 


rect (<х>, <y>, <w>, <h>) 


Нарисуем фигуру, состоящую их трех накладывающихся друг на друга разно- 
цветных квадратов: 


ЕхСапуаѕ.редіпрРаїћ (); 
txCanvas.fillStyle = "red"; 
схСапуаѕ.гесі (50, 50, 50, 50); 
ЕхСапуаѕ.#і11(); 
ЕхСапуаѕ.редіпрРаїћ (); 
txCanvas.fillStyle = "green"; 
txCanvas.rect (75, 75, 50, 50); 
txCanvas.fill(); 
ЕхСапуаѕ.редіпрРаїћ (); 
txCanvas.fillStyle = "Ю1ае"; 
txCanvas.rect (100, 100, 50, 50); 
ЕхСапуав.Ғ111(); 


Омо О сок скот Е Орозон О A 


П clip() — создает маску на основе текущего пути (путь должен быть закрытым). 
Область внутри пути будет видна, а вне — скрыта: 


ЕхСапуаѕ.редіпрРаїћ (); 
txCanvas.moveTo (100, 150); 
ЕхСапуаѕ.1іпеТо (200, 0); 
ЕхСапуаѕ.1іпеТо (200, 300); 
ЕхСапуаѕ.с1оѕерРаёћ (); 


ЕхСапуаѕ.с1ір(); 
ЕхСапуаѕ.#і11Кесї (0, 100, 400, 100); 


ОООО н. 10 


3.18.10. Определение вхождения точки 
в состав контура 


Иногда бывает необходимо выяснить, входит ли точка с заданными координатами 
в состав контура СЛОЖНОЙ фигуры. Сделать это мы можем с помощью метода 
isPointInPath (<х>, <y>). Метод возвращает true, если точка с такими координата- 
ми входит в состав контура, и Еа1зе — в противном случае: 


ctxCanvas.beginPath (); 
сіхСапуаѕ.гесі (50, 50, 50, 50); 
ctxCanvas.stroke (); 
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if (сёхСапуаѕ.іѕРоіпіІпРаіһ (60, 50)) { 
window.alert ("Точка входит в состав контура"); 


3.18.11. Использование сложных цветов 

Помимо однотонных цветов, холст позволяет использовать для закрашивания 
линий и заливок градиенты и даже выполнять заливку текстурой. 

Линейный градиент 


Линейный градиент создают в три этапа. Первый этап — вызов метода 
createLinearGradient () — собственно создание линейного градиента: 


createLinearGradient (<х1>, <у1>, <х2>, <у2>) 


Метод createLinearGradient () возвращает объект класса CanvasGradient, представ- 
ляющий созданный линейный градиент. С его помощью мы указываем цвета, фор- 
мирующие градиент. 


Второй этап — расстановка ключевых точек градиента. Здесь нам понадобится ме- 
ТОД addColorStop() класса CanvasGradient: 


<Градиент>.ааЯСо1ог5 Фор («Положение ключевой точки>, <Цвет>) 


Первый параметр задается в виде числа от 0.0 (начало прямой) до 1.0 (конец пря- 
мой). Результат этот метод не возвращает. 


Третий этап — использование готового линейного градиента. Для этого представ- 
ЛЯЮЩИЙ его обьект класса CanvasGradient следует присвоить свойству strokeStyle 
ИЛИ fillStyle. 

Пример: 

var lgSample = ctxCanvas.createLinearGradient (0, 0, 100, 50); 
lgSample.addColorStop(0, "black"); 

lgSample.addColorStop(0.4, "гора (0, 0, 255, 0.5)"); 

lgSample.addColorStop(1, "#ff0000"); 

ctxCanvas.fillStyle = lgSample; 

ctxCanvas.fillRect(0, 0, 200, 100); 


Радиальный градиент 


Радиальный градиент также создают в три этапа. Первый этап — вызов метода 
createRadialGradient () — создание радиального градиента: 


createRadialGradient ( 

<Горизонтальная координата центра внутренней окружности>, 
<Вертикальная координата центра внутренней окружности>, 
<Радиус внутренней окружности>, 


<Горизонтальная координата центра внешней окружности>, 
<Вертикальная координата центра внешней окружности>, 
<Радиус внешней окружности>) 
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Параметры этого метода определяют координаты центров и радиусы обеих окруж- 
ностей, описываюших радиальный градиент. Они задаются в пикселах В виде 
чисел. 


Метод createRadialGradient () возвращает объект класса CanvasGradient, представ- 
ляющий созданный нами радиальный градиент. 


Второй этап — расстановка ключевых точек — выполняется с помощью уже зна- 
комого нам метода addColorStop() класса CanvasGradient. Только в данном случае 
первый параметр определит относительное положение создаваемой ключевой точ- 
ки на промежутке между внутренней и внешней окружностями. Он задается в виде 
числа от 0.0 (начало промежутка, т. е. внутренняя окружность) до 1.0 (конец про- 
межутка, т. е. внешняя окружность). 


И третий этап — использование созданного градиента. 
Пример: 


var rgSample = ctxCanvas.createRadialGradient (100, 100, 10, 150, 100, 120); 
габатр1е.аа9Со1от5 ор (0, "#сссссс"); 

rgSample.addColorStop(0.8, "Біаск"); 

rgSample.addColorStop(1, "#00ЕЕ00") ; 

ctxCanvas.fillStyle = rgSample; 

ctxCanvas.fillRect(0, 0, 200, 100); 


Заливка текстурой 


Заливка текстурой выполняется с помощью метода createPattern (): 


сгеаіеРаііегп (<Графическое изображение или холст>, <Режим повторения>) 


Первый параметр задает графическое изображение в виде объекта класса Image, 
элемента IMG или объекта другого холста. 


Часто бывает так, что размеры заданного графического изображения меньше, чем 
фигуры, к которой должен быть применен графический цвет. В этом случае изо- 
бражение повторяется столько раз, чтобы полностью «вымостить» линию или за- 
ливку. Режим такого повторения задает второй параметр метода createPattern (). 
Его значение должно быть одной из следующих строк: 


П "repeat" — повтор по горизонтали и вертикали; 
П "repeat-x" — повтор только по горизонтали; 

П "repeat-y" — повтор только по вертикали; 

П "no-repeat" — без повтора. 


Метод createPattern () возвращает объект класса CanvasPattern. 
Пример: 


var imgSample = new Image (); 
imgSample.src = "graphic_color.jpg"; 
var cpSample = ctxCanvas.createPattern (imgSample, "repeat"); 
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ctxCanvas.fillStyle = србашр1е; 
сіхСапуаѕ.#і11Кесї (0, 0, 200, 100); 


Текстура не фиксируется на холсте, а полностью применяется к рисуемой фигуре. 
В этом ее принципиальное отличие от градиентов. 


3.18.12. Сохранение и восстановление состояния 


Значения основных характеристик можно сохранить в стек, выполнить какую-либо 
операцию рисования, а затем восстановить эти значения из стека. Для этого пред- 
назначены следующие методы: 


О зауе() — сохраняет значения основных характеристик (в частности характери- 
стики заливки, обводки, текста и др.) в стек; 


С гезеоге() — восстанавливает значения основных характеристик из стека. 
При сохранении состояния сохраняются: 
С все заданные трансформации; 


П значения свойств globalAlpha, globalCompositeOperation, Е1115%у1е, Ііпесар, 
Ііпејоіп, lineWidth, miterLimit И зегоке5іуіе; 


O все заданные маски. 


3.18.13. Трансформации 


Выполнить различные преобразования позволяют следующие методы: 


О scale(<dx>, <ау>) — изменяет масштабирование. Параметры этого метода 3a- 
дают масштаб для горизонтальной и вертикальной осей системы координат 
в виде чисел. Числа меньше 1.0 задают уменьшение масштаба, а числа больше 
1.0 — увеличение. Если нужно оставить масштаб по какой-то из осей неизмен- 
ным, достаточно указать значение 1.0 соответствующего параметра. 


Вот пример увеличения масштаба в два раза: 


сЕхСапуа$.зауе (); 
сіхСапуаѕ.зѕса1е (2.0, 2.0); 
сіхСапуаѕ.#і11Кесї (10, 40, 40, 40); 
сЕхСапуа$ .гезбоге (); 


П хосаге(<Угол в радианах>) — применяет трансформацию вращения. По умолча- 
нию вращение выполняется относительно левого верхнего угла холста. Отме- 
тим, что поворот всегда выполняется по часовой стрелке: 


сЕхСапуа$.зауе (); 

ctxCanvas.translate (200, 150); 

Жос (уаг і = 0; 1 < 3; 1++) { 
ctxCanvas.rotate (МаёҺ.РІ / 6); 
ctxCanvas.strokeRect (-50, -50, 100, 100); 

} 


сехСапуаз.гезіоге(); 


П translate (<tx>, <ty>) — сдвигает систему координат. 
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3.18.14. Управление наложением графики 


Когда мы рисуем какую-либо фигуру поверх уже сушествуюшей, новая фигура 
накладывается на старую, перекрывая ее. Это поведение по умолчанию, которое мы 
можем изменить, указав другие значения для свойства globalCompositeOperation. 


Вот перечень поддерживаемых значений: 


С "source-over" — новая фигура накладывается на старую, перекрывая ее (значе- 
ние по умолчанию); 


С "зочксе-ағор" — отображается только та часть новой фигуры, которая наклады- 
вается на старую, остальная часть новой фигуры не выводится. Старая фигура 
выводится целиком и находится ниже новой; 


С "source-in" — отображается только та часть новой фигуры, которая накладыва- 
ется на старую, остальные части новой и старой фигур не выводятся; 


П "source-out" — отображается только та часть новой фигуры, которая не Ha- 
кладывается на старую, остальные части новой фигуры и вся старая фигура не 
выводятся; 


С "destination-over" — новая фигура перекрывается старой; 


П "destination-atop" — отображается только та часть старой фигуры, которая 
накладывается на новую, остальная часть старой фигуры не выводится. Новая 
фигура выводится целиком и находится ниже старой; 


С "destination-in" — отображается только та часть старой фигуры, на которую 
накладывается новая, остальные части новой и старой фигур не выводятся; 


С "destination-out" — отображается только та часть старой фигуры, на которую 
не накладывается новая, остальные части новой фигуры и вся старая фигура не 
выводятся; 


С "lighter" — цвета накладывающихся частей старой и новой фигур складывают- 
ся, результирующий цвет получается более светлым, окрашиваются наклады- 
вающиеся части фигур; 


С "хог" — отображаются только те части старой и новой фигур, которые не накла- 
дываются друг на друга; 

С "сору" — выводится только новая фигура, все старые фигуры удаляются с хол- 
ста. 


Заданный нами способ наложения действует только для графики, которую мы на- 
рисуем после этого. На уже нарисованную графику он не влияет. 


Приведенный в следующем примере код рисует два накладывающихся прямо- 
угольника разных цветов и позволит изучить их поведение при разных значениях 
свойства globalCompositeOperation — изменяем значение этого свойства, переза- 
гружаем страницу и смотрим, что получается: 


сЕхСапуа$. {1115$ у1е = "blue"; 
сЕхСапуа$ .{Е111Вес (0, 50, 400, 200); 
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ctxCanvas.fillStyle = "red"; 
сЕхСапуаз .globalCompositeOperation = "source-over"; 
ctxCanvas.fillRect(100, 0, 200, 300); 


3.18.15. Задание уровня прозрачности 


Свойство globalAlpha указывает уровень прозрачности для любой графики, KOTO- 
рую мы впоследствии нарисуем. Уровень прозрачности также задается в виде числа 
от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный; значение по 
умолчанию): 

ctxCanvas.globalAlpha = 0.1; 


3.18.16. Создание тени 


Холст позволяет создавать тень у всех рисуемых фигур. Для задания ее параметров 
применяют четыре свойства: 


С shadowOffsetX — смещение тени по горизонтали относительно фигуры (в виде 
числа в пикселах, значение по умолчанию — 0); 


O shadowoffsetY — смещение тени по вертикали относительно фигуры (в виде 


числа в пикселах, значение по умолчанию — 0); 


0) 


o 


9) 


hadowBlur — степень размытия тени в виде числа: чем больше это число, тем 
сильнее размыта тень (значение по умолчанию — 0, т. е. отсутствие размытия); 


С shadowColor — цвет тени (по умолчанию — черный непрозрачный). 
Пример: 

ctxCanvas .shadowOffsetX = 2; 

ctxCanvas .shadowOffsetY = -2; 

ctxCanvas.shadowBlur = 4; 


сіхСапуаѕ.ѕһааоиСо1ог = "гора (128, 128, 128, 0.5)"; 
ctxCanvas.fillText ("Двое: я и моя тень.", 150, 50); 


3.18.17. Работа с отдельными пикселами 


И наконец, мы можем работать с отдельными пикселами графики, нарисованной на 
холсте. Это может пригодиться при создании очень сложного изображения или при 
наложении на графику специальных эффектов наподобие размытия. 


Получение массива пикселов 


Получить массив пикселов, представляющий нарисованную на холсте графику ИЛИ 
ее фрагмент, позволяет метод getImageData (). Формат метода: 


getImageData (<х>, <y>, <Ширина>, <Высота>) 


Первые два параметра указывают координату левого верхнего угла фрагмента на- 
рисованной графики, два последних — его ширину и высоту. 
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Метод getImageData () возвращает объект класса ImageData, представляющий массив 
пикселов, что составляют присутствующий фрагмент графики с указанными нами 
параметрами: 


var idSample = сехСапуаз.деЕТтаадерафа (200, 150, 100, 100); 


Создание пустого массива пикселов 


Чтобы самостоятельно нарисовать какое-либо изображение, можно сначала создать 
пустой массив пикселов, вызвав метод createImageData (): 


сгеагеІтадеПаға (<Ширина>, <Высота>) 


Метод возврашает объект класса ImageData: 


var idEmpty = ctxCanvas.createľmageData (400, 300); 


Здесь мы создаем пустой массив пикселов тех же размеров. что и сам холст. 


Манипуляция пикселами 


Теперь мы можем начать работать с отдельными пикселами полученного массива, 
задавая для них цвет и значения полупрозрачности и тем самым формируя какое- 
либо изображение или изменяя уже существующее. 


Класс ImageData Поддерживает СВОЙСТВО data. Его значением является объект- 
коллекция, хранящая набор чисел: 


П первое число представляет собой долю красного цвета в цвете первого пиксела 
массива; 


второе число — долю зеленого цвета в цвете первого пиксела; 

третье число — долю синего цвета в цвете первого пиксела; 
четвертое число — степень полупрозрачности цвета первого пиксела; 
пятое число — долю красного цвета в цвете второго пиксела; 

шестое число — долю зеленого цвета в цвете второго пиксела; 
седьмое число — долю синего цвета в цвете второго пиксела; 


восьмое число — степень полупрозрачности цвета второго пиксела; 


п-3-е число — долю красного цвета в цвете последнего пиксела; 


п-2-е число — долю зеленого цвета в цвете последнего пиксела; 


п оачоччоччошч 


п-1-е число — долю синего цвета в цвете последнего пиксела; 
O n-e число — степень полупрозрачности цвета последнего пиксела. 


Все значения, включая и степень полупрозрачности, должны укладываться в диапа- 
зон от 0 до 255. Для степени полупрозрачности значение 0 задает полную прозрач- 
ность, а 255 — полную непрозрачность. 


Нумерация пикселов в массиве идет слева направо и сверху вниз, т. е. по строкам. 


386 Гпава 3 


Поскольку набор чисел, храняшийся в свойстве data класса ImageData, представляет 
собой коллекцию, для доступа к отдельным значениям мы можем использовать тот 
же синтаксис. что и в случае обычных массивов. Также мы можем воспользоваться 
поддерживаемым всеми коллекциями свойством length, возвращающим размер 
коллекции. 


Для пустого массива все пикселы будут иметь прозрачный черный цвет. Набор, 
хранящийся в свойстве data, будет содержать нули. 


В следующем примере мы задаем для первого пиксела (левого верхнего) ПОЛ- 
ностью непрозрачный красный цвет: 


var idEmpty = ctxCanvas.createľmageData (400, 300); 
idEmpty.data[0] = 255; 

idEmpty.data[1] = 0; 

idEmpty.data[2] = 0; 

idEmpty.data [3] 255; 

ctxCanvas .putImageData (idEmpty, 0, 0); 


Вывод массива пикселов 


Завершив формирование НОВОГО изображения в массиве пикселов, мы можем вы- 
вести его на холст, вызвав метод putImageData (): 


putImageData (<Массив пикселов>, <х1>, <у1>[, <х2>, <у2>, 
<Ширина>, <Высота>]) 


Второй и третий параметры задают координату точки, где будет находиться левый 
верхний угол выводимого массива пикселов. Четвертый И ПЯТЫЙ параметры задают 
координаты точки, где находится левый верхний угол фрагмента массива пикселов, 
который должен быть выведен на холст, а шестой и седьмой — ширину и высоту 
ВЫВОДИМОГО фрагмента. Если эти параметры не указаны, будет выведен весь массив 
пикселов: 


сЕхСапуаз .putImageData (idEmpty, 0, 0); 


В листинге 3.68 приведен код, рисующий на странице прямоугольник с градиент- 
ной заливкой. В заливке зеленый цвет плавно сменяется синим, а потом — крас- 
ным. При этом цвета становятся все более и более прозрачными. 


Листинг 3.68. Вывод массива пикселов 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<Е1Е1е>Манипуляция пикселами</ііё1е> 


<script> 


window.addEventListener ("1оаа", function() { 


var оСапуаз = document .getElementById ("спу"); 


var ctxCanvas = oCanvas.getContext ("2а"); 
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var idEmpty = ctxCanvas.createImageData (255, 255); 


for (var i = 0; i < idEmpty.data.length; i += 4) { 


idEmpty.data[i + 0] = i / 4 / 255; 
idEmpty.data[i + 1] = 255 - i / 4 / 255; 
idEmpty.data[i + 2] = i / 4 / 255; 
idEmpty.data[i + 3] = 255 - i / 4 / 255; 


} 
ctxCanvas .putImageData (idEmpty, 0, 0); 
}, false); 
</script> 
</head> 
<body> 
<canvas id="cnv" width="400" height="300"></canvas> 
</body> 
</html> 


3.19. Хранилище 


Мы уже знаем способ сохранить произвольные данные на стороне клиента — фай- 
лы cookies. Однако лучше всего для этой цели пользоваться средствами DOM 3, 
о которых сейчас пойдет речь. 


Хранилище — это инструмент для сохранения на стороне клиента произвольных 
данных любого типа. Хранилище позволяет запомнить любое значение. указав для 
него уникальное имя, а впоследствии извлечь его, сославшись на заданное ранее 
имя, и использовать в вычислениях. 


3.19.1. Сессионное и локальное хранилища 


Современные \еБ-браузеры предлагают разработчикам сценариев два различных 
хранилища: 


С сессионное хранилище — хранит данные, пока в окне \еБ-браузера открыта 
текущая страница. После перехода на другую страницу или закрытия окна все 
сохраненные данные будут удалены. Сессионное хранилище подходит лишь для 
временного хранения данных при случайном обновлении страницы посети- 
телем; 


O локальное хранилище — сохраняет данные даже после перехода на другую стра- 
HANY или закрытия окна \!еБ-браузера. Позволяет хранить данные неопределен- 
но долгое время. 


Нужно помнить, что хранилище любого типа хранит данные, относящиеся к какой- 
то одной странице. Данные, сохраненные любой другой страницей, при этом счи- 
тать невозможно — это сделано ради безопасности. 
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3.19.2. Работа с хранилищем 


Сессионное хранилище доступно через свойство зеззіоп5еогаде, а локальное — 
через свойство 1оса15-огаде. Оба этих свойства поддерживаются объектом window. 


ВНИМАНИЕ! 


Хранилища обоих типов доступны лишь в том случае, если страница была загружена 
с М/ер-сервера. При загрузке страницы с локального диска свойства sessionStorage и 
1оса15$огаде недоступны. 


Хранилище любого типа представляется объектом класса Storage. Все манипуля- 
ции по сохранению и чтению данных выполняются посредством вызова методов 
этого объекта. 


В следующем примере мы получаем сессионное хранилище: 


var stSession = міпдом.зеззіоп5іокаде; 


А в этом — получаем доступ к локальному хранилищу с учетом того, что Web- 
браузер может его не поддерживать: 


if (міпдомч.1оса15%огаде) { 
var stLocal = window.localStorage; 
console.log (stLocal); 
// Работаем с локальным хранилищем 
} 
еізе { 
сопво1е.1о04("Мео-браузер не поддерживает локальное хранилище"); 


} 


Метод зе Тем (<Имя>, <Значение>) выполняет сохранение значения в хранилище. 
Имя, под которым сохраненное значение можно будет впоследствии отыскать 
и прочитать, как и само значение, указываются в виде строк. Результат этот метод 
не возвращает: 


5ЕТюоса1. зе Теем ("1 апаааде", "JavaScript"); 


Для чтения сохраненного ранее значения мы применим метод getItem (<Имя>). Имя, 
опять же, указывается в виде строки. Метод возвращает извлеченное из хранилища 
значение в виде строки или по11, если значения с указанным именем найти не уда- 
лось: 


var language = stLocal.getItem("language"); 

if (language) { 
// Используем полученное из хранилища значение 
console.log (language); 

} 

else { 
console.log ("Такого значения в хранилище нет"); 


} 


Если понадобится удалить из хранилища сохраненное ранее значение, следует вы- 
звать метод гепочуеісет(<Имя>). Результат он не возвращает: 


stLocal.removeItem ("language"); 
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Единственное свойство объекта Storage — length — возвращает количество сохра- 
ненных в хранилище значений в виде числа. 


СОВЕТ 


Посмотреть содержимое хранилиша можно на вкладке Хранилише Инструментов 
разработчика. Чтобы отобразить вкладку, переходим в главное меню и выбираем 
пункт Разработка | Инспектор хранилиша или нажимаем комбинацию клавиш 
<Shift>+<F9>. 


3.19.3. Использование локального хранилища 
для временного хранения данных 
Локальное хранилище — идеальное средство для временного хранения данных, 


введенных посетителем в форму. Код из листинга 3.69 демонстрирует его исполь- 
зование для этой цели. 


Листинг 3.69. Пример временного хранения данных в хранилище 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<title>Xpannzmme HTML 5</title> 
<script> 


window.addEventListener ("load", function() { 


var stLocal = window.localStorage; 
var txtTitle = document.getElementById ("txtTitle"); 
var txtContent = document .getElementById ("txtContent"); 
lementById ("btnSave"); 
var btnLoad = document .getElementById ("btnLoad"); 
btnLoad.disabled = !((stLocal.getItem("title")) && 
(stLocal.getItem("content"))); 

btnSave.addEventListener ("с1іск", function() 1 

if ((txtTitle.value) && (txtContent.value)) 1 

stLocal.setItem("title", txtTitle.value); 


var btnSave = document.geti 


Бі Ы 


stLocal.setItem("content", txtContent.value); 
btnLoad.disabled = false; 
} 
}, false); 
btnLoad.addEventListener ("с1іск", function() { 
txtTitle.value = stLocal.getItem("title"); 
txtContent.value = stLocal.getItem("content"); 
}, false); 
}, false); 
</script> 
</head> 
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<роау> 
<form> 
<р>Заголовок статьи<рг> 
<input type="text" id="txtTitle"></p> 
<р>Содержимое статьи<рг> 
<textarea id="txtContent"></textarea></p> 
<p><input type="submit" уа1ае="Отпнравить"></р> 
<p><input type="þutton" id="btnSave" уа1ае="Сохранить"> 
<input type="button" id="btnLoad" уа]ае="Загрузить" disabled></p> 
</form> 
</body> 
</html> 


3.20. Средства геолокации 


DOM 3 также предоставляет средства для геолокации, т. е. для получения местопо- 
ложения клиентского компьютера (его географических координат). 


3.20.1. Доступ к средствам геолокации 


Средства геолокации доступны из свойства с «говорящим» названием geolocation, 
поддерживаемым объектом navigator. Они представляют собой объект класса 
Geolocation, с помощью методов которого и выполняется получение местополо- 
жения: 


if (navigator.geolocation) { 
var oGeo = navigator.geolocation; 
// Получаем данные геолокации 

} else { 


// Мер-браузер не поддерживает геолокацию 


3.20.2. Получение данных геолокации 


Проще всего однократно получить данные геолокации, т. е. географические коор- 
динаты клиентского компьютера. Это можно сделать, обратившись к методу 
getCurrentPosition() класса Geolocation: 


getCurrentPosition («Функция для получения данных>[, 
<Функция, вызывающаяся в случае ошибки>[, <Параметры>11) 


Единственным обязательным параметром этому методу передается функция, KOTO- 
рая будет вызвана при успешном получении данных геолокации и собственно по- 
лучит их. В качестве единственного параметра она получит объект класса Роз ition, 
храняший данные геолокации. 
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У объекта класса Position, полученного функцией, нас интересует свойство coords. 
Оно хранит объект класса Coordinates, представляющий координаты клиента и 
поддерживающий следующие свойства: 


О latitude — широта в градусах; 
О longitude — долгота в градусах; 


О altitude — высота над уровнем моря в метрах. Если значение высоты получить 
не удается, возвращается null; 


o accuracy — Точность определения широты и долготы в метрах; 


п altitudeAccuracy — Точность определения высоты в метрах. Если значение вы- 
соты получить не удается, возвращается п111; 


П heading — направление движения. Представляет собой угол в градусах, отме- 
ренный от направления на север по часовой стрелке. Если клиентский компью- 
тер никуда не движется, возвращает мам, если значение направления получить не 
удается, — null; 


o speed — скорость движения B метрах в секунду. Если клиентский компьютер 
никуда не движется, возвращает Мам. Если значение скорости получить не удает- 
ся, возвращается null. 


Все эти свойства возвращают числовые значения. 


Пример получения данных геолокации приведен в листинге 3.70. 


Листинг 3.70. Получение данных геолокации 


if (navigator.geolocation) { 
navigator.geolocation.getCurrentPosition (function (pos) { 
var lat = pos.coords.latitude; 
var lon = pos.coords.longitude; 
var alt = pos.coords.altitude; 
var heading = pos.coords.heading; 


if (isNaN(heading)) heading = 0; 
var speed = роз.соога$ . зрееа; 
Юю; 


3.20.3. Обработка нештатных ситуаций 


При получении данных геолокации возможны нештатные ситуации -- например, 
ошибки в работе инструментов определения местоположения, встроенных в кли- 
ентский компьютер. При их возникновении будет выполнена функция, переданная 
методу getCurrentPosition() вторым параметром. 


В качестве единственного параметра эта функция получит объект класса 
PositionError, храняший сведения о возникшей ошибке. Этот класс поддерживает 
два свойства: 
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O code — числовой код ошибки: 
е 1-- посетитель запретил странице доступ к данным геолокации; 


e 2— B работе инструментов для определения местоположения, встроенных 
в компьютер, возникла ошибка; 


® 3--истекло время, отведенное на определение местоположения; 
О message — текстовое описание ошибки. 


Пример обработки нештатных ситуаций приведен в листинге 3.71. 


Листинг 3.71. Обработка нештатных ситуаций 


navigator.geolocation.getCurrentPosition (function (pos) 1 
// Получаем данные геолокации 
}, function (error) 4 
switch (error.code) { 
case 1: 
window.alert ("Нет доступа к данным геолокации"); 
break; 
case 2: 
міпаом.а1егі ("Внутренняя ошибка"); 
break; 
case 3: 
window.alert ("Истекло время, отведенное на получение данных"); 


ргеак; 
} 
}); 


3.20.4. Задание дополнительных параметров 


При получении сведений о местоположении можно задать дополнительные пара- 
метры. Они указываются третьим параметром метода getCurrentPosition() В виде 
объекта, поддерживающего указанные далее свойства: 


С enableHighAccuracy — задает точность получения данных: если true, то устрой- 
ство будет по возможности получать максимально точные данные геолокации, 
если false — данные меньшей точности. Следует помнить, что получение TOY- 
ных данных может потребовать больше времени и повысить энергопотребление 
устройства. Значение по умолчанию — false; 


o maximumAge -- указывает время (в виде числа в миллисекундах), в течение кото- 
рого полученные данные геолокации будут кэшироваться устройством. Если за- 
дано 0, устройство не будет кэшировать данные, если Infinity — эти данные 
будут кэшироваться до тех пор, пока не устареют (пока компьютер не изменит 
свое местоположение). Значение по умолчанию — Infinity; 


O timeout — указывает время (в виде числа в миллисекундах), отведенное на 
получение сведений о местоположении. По истечении этого времени будет сге- 
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нерирована ошибка, которую можно отследить. Если задано Infinity, то время 
ограничиваться не будет. Значение по умолчанию — Infinity. 


Пример указания дополнительных параметров приведен в листинге 3.72. 


Листинг 3.72. Пример указания дополнительных параметров getCurrentPosition () 


navigator.geolocation.getCurrentPosition (function (pos) 1 
// Получаем данные геолокации 
}, function (error) { 
// Отслеживаем нештатные ситуации 
}, { 
епар1еН1апАссигасу: true, 
maximumāge: 10000, 
timeout: 5000 
}); 


Здесь мы задаем получение точных координат и кэширование их в течение 
10 секунд, а также отводим на их получение время, равное 5 секундам. 


3.20.5. Отслеживание местоположения компьютера 


Наконец, мы можем постоянно отслеживать местоположение клиентского компью- 
тера, чтобы выяснить, куда он перемещается и достиг ли он точки назначения. Для 
этого нужно использовать метод watchPosition(), формат вызова которого совпада- 
ет с таковым у метода getCurrentPosition(). 


Как только местоположение клиентского компьютера изменится, будет вызвана 
функция, переданная этому методу первым параметром. А при возникновении 
нештатной ситуации — функция, переданная вторым параметром. 


Метод watchPosition() возвращает особый идентификатор, который позволяет от- 
менить отслеживание местоположения. Это можно сделать вызовом не возвра- 
щающего результат метода с1еагМассв (): 


<Объект геолокации>.с1Іеагйаїсһ (<Идентификатор>) 
В листинге 3.73 показан код, отслеживающий местоположение клиента, чтобы ВЫ- 


яснить, достиг ли он точки назначения. Координаты точки назначения хранятся 
в переменных latD (широта) и 1опр (долгота). 


Листинг 3.73. Пример отслеживания местоположения компьютера 


var wp = navigator.geolocation.watchPosition (function (pos) 1 
if ((latD == pos.coords.latitude) && (lonD == pos.coords.longitude)) 1 
navigator.geolocation.clearWatch (wp); 


window.alert ("Вы в точке назначения!"); 


394 Гпава 3 


}, function (error) { 


window.alert (еггог.пеѕѕаде); 
}); 


На этом мы заканчиваем знакомство с клиентскими технологиями и переходим 
к изучению технологий, которые выполняются на стороне сервера. Но вначале на 
компьютер необходимо установить специальное программное обеспечение. Какое 
программное обеспечение необходимо, где его найти и как установить, мы рас- 
смотрим в следующей главе. 


ГЛАВА 4 


Программное обеспечение 
Мгер-сервера. 

Устанавливаем и настраиваем 
программы под Windows 


4.1. Необходимые программы 


Для тестирования программ необходимо установить на компьютер специальное 
программное обеспечение: 


O Web-cepeep Apache — программное обеспечение, отвечающее за отображение 
документов, запрашиваемых при наборе ОКІ -адреса в адресной строке Web- 
браузера; 

O Интерпретатор РНР — для выполнения программ, написанных на языке РНР; 

С MySQL — сервер баз данных; 

O phpMyAdmin — набор скриптов на РНР для управления базами данных. 

Все эти программы можно бесплатно получить с сайтов производителей. 


Необходимо сразу заметить, что программное обеспечение мы устанавливаем толь- 
ко для тестирования и не задаемся целью охватить все его настройки. 


ВНИМАНИЕ! 


В последних версиях Windows при внесении в систему ключевых изменений (задание 
настроек, установка программ и т. п.) выводится на экран предупреждение подсисте- 
мы UAC. На такие предупреждения всегда следует отвечать положительно, в против- 
ном случае изменения не будут внесены, и программы могут оказаться неработоспо- 
собными. 


ПРИМЕЧАНИЕ 


В приведенных далее инструкциях по установке указываются точные версии устанав- 
ливаемых программ. Скорее всего, ко времени выхода книги из печати будут выпуше- 
ны новые версии. В этом случае рекомендуется использовать их, особенно если но- 
мера версий различаются только последними цифрами. Вероятно, процесс установки 
НОВЫХ версий программ будет мало отличаться от описанного в книге, однако следует 
иметь в виду, что незначительные различия все же могут присутствовать. 
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Прежде чем устанавливать программы, необходимо проверить сетевые настройки и 
убедиться в отсутствии программ, занимающих порты 80 и 3306, т. к. эти порты 
используют УҮеһ-сервер Apache и сервер MySQL. Для проверки запустим команд- 
ную строку Windows. Вполне возможно, что вы никогда не пользовались команд- 
ной строкой и не знаете, как она запускается. Давайте рассмотрим некоторые спо- 
собы ее запуска в Windows: 


п через поиск находим приложение Командная строка; 


С нажимаем комбинацию клавиш <Windows>+<R>. В открывшемся окне вводим 
cmd и нажимаем кнопку ОК; 


П находим файл cmd.exe в папке C:\Windows\System32; 


П в Проводнике щелкаем правой кнопкой мыши на свободном месте списка фай- 
лов, удерживая при этом нажатой клавишу <Shift>. Из контекстного меню 
выбираем пункт Открыть окно команд. 


В командной строке набираем команду: 


ріпа 127.0.0.1 


Если число потерянных пакетов больше 0, то необходимо проверить сетевые на- 
стройки. Чтобы проверить порты 80 и 3306, в командной строке набираем команду: 


netstat -anb 


В полученном списке не должно быть строк с портами 80 и 3306. Если они есть, то 
Apache или MySQL не смогут запуститься. Обычно эти порты занимают програм- 
мы Skype и \!еБ-сервер IIS. Перед установкой и использованием Apache и MySQL 
запускать эти программы не следует. 


ВНИМАНИЕ! 


Для получения результатов выполнения команды netstat необходимо запустить команд- 
ную строку с правами администратора. Чтобы это сделать, через поиск находим при- 
ложение Командная строка, шелкаем на его значке правой кнопкой мыши и выбира- 
ем команду Запуск от имени администратора. 


4.2. Установка ХАМРР 


Все необходимые нам программы входят в пакет ХАМРР, который мы сейчас и ус- 
тановим. Для этого переходим на сайт https://www.apachefriends.org/ и загружаем 
файл xampp-win32-7.2.0-0-VC15-installer.exe или более позднюю его версию. Запускаем 
программу установки и в открывшемся окне (рис. 4.1) нажимаем кнопку Next. На 
следующем шаге (рис. 4.2) проверяем установку всех флажков и нажимаем кнопку 
Next. Далее выбираем место установки (рис. 4.3) и нажимаем кнопку Next. Лучше 
всего установить пакет в папку СЛхатрр, которая используется по умолчанию. На 
следующих двух шагах (рис. 4.4 и 4.5) тоже нажимаем кнопку Next. В процессе 
установки будет выведено окно с запросом блокировки запуска сервера Арасһе. 
Следует в обязательном порядке разрешить запуск, иначе ничего работать не ста- 
нет. На последнем шаге (рис. 4.6) нажимаем кнопку Finish. 


Программное обеспечение И/ер-сервера. Устанавливаем и настраиваем программы... 


Setup 
Setup - XAMPP 


Welcome to the XAMPP Setup Wizard. 


(9 bitnami 


< Back Next > 


- = 


Cancel 


Рис. 4.1. Установка XAMPP: шаг 1 


Setup 


Select Components 


Select the components you want to install; dear the components you do not want to install. Click 


Next when you are ready to continue. 
Е бегуег 
Apache 
MySQL 
FileZilla FTP Server 
Mercury Mail Server 
Tomcat 
gram Languages 
PHP 
Perl 
gram Languages 
phpMyAdmin 
Webalizer 
Fake Sendmail 


п 


ARRIER 


т 
< 
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ЕЗІЗІЗЕ 


0) 
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<<< 


XAMPP Installer — 


< Back Next > 


Click on a component to get a detailed description 


Cancel 


Рис. 4.2. Установка XAMPP: шаг 2 
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Setup 


Installation folder 


Please, choose a folder to install XAMPP 
Select a folder | C:\xampp Ге 


XAMPP Installer 


< Back Next > 


Cancel 


Рис. 4.3. Установка XAMPP: war 3 


Setup 


Bitnami for XAMPP 


Bitnami for XAMPP provides free installers that can install 
Drupal, Joomla!, WordPress and many other popular open 
source apps on top of your existing XAMPP installation. 


https: /Ыйпаті.сот/хатрр 


$ Learn more about Bitnami for XAMPP 


XAMPP Installer 


< Back Next > 


Cancel 


Рис. 4.4. Установка XAMPP: war 4 
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Программное обеспечение И/ер-сервера. Устанавливаем и настраиваем программы... 


|02) Setup 


Ready to Install 


Setup is now ready to begin installing XAMPP on your computer. 


XAMPP Installer 


< Back Next > 


- = 


Cancel 


Рис. 4.5. Установка XAMPP: war 5 


Setup 


Completing the XAMPP Setup Wizard 


V| Оо you want to start the Control Panel now? 


O bitnami 


< Back Finish 


Setup has finished installing XAMPP on your computer, 


- ЕШ 


Cancel 


Рис. 4.6. Установка XAMPP: war 6 
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Если на последнем шаге флажок, имеющийся в окне, показанном на рис. 4.6, не 
был сброшен, то автоматически запустится приложение XAMPP Control Panel. 
В случае, если приложение не запустилось, переходим в папку C:\xampp и запускаем 
на выполнение файл хатрр-сопігоі.ехе. В результате отобразится окно, показанное на 
рис. 4.7. 


Я XAMPP Control Panel v3.2.2 [ Compiled: Nov 12th 20151 - с 8 


XAMPP Control Panel v3.2.2 


Modules 


Service Мойше РіП(е) рог{ѕ) Actions eet 
Apache Start іп Config Logs г She! 

MySQL Start A Config Logs [3 Explorer 

FileZilla Start Admin Config Logs Е? Services 
Mercury Start d Config Logs Ә нер 
Tomcat Start Аат Config Logs El Quit 

750 [main] there will be a security dialogue or things will break! So think ^ 


2:57:50 [main] about running this application with administrator rights! 
2:57:50 [main] XAMPP Installation Directory: "c:\xampp\" 

[main] Checking for prerequisites 

[main] All prerequisites found 

[main] Initializing Modules 

[main] Starting Check-Timer 

[main] Control Panel Ready 


Рис. 4.7. Окно XAMPP Control Panel 


Давайте попробуем запустить серверы. Для этого нажимаем кнопки Start y пунктов 
Apache и MySQL. При успешном запуске названия серверов будут выделены зеле- 
ным цветом, а справа отобразятся идентификаторы процессов и номера портов, 
на которых серверы запущены (рис. 4.8). При этом кнопки Start будут заменены на 
кнопки Stop, с помощью которых можно будет серверы остановить. 


ПРИМЕЧАНИЕ 


Если при попытке запуска серверов возникла ошибка, то вначале нужно проверить, 
а не блокирует ли программы брандмауэр Windows или антивирусная программа. 
Если добавление серверов в список их исключений проблему не решает, то, вполне 
возможно, на компьютере не хватает библиотек динамической компоновки. В этом 
случае следует установить исполняемую среду Microsoft Visual С++. Она доступна 
бесплатно на сайте Microsoft. 


После нажатия красной кнопки с крестиком в заголовке окна XAMPP Control 
Panel окно не закрывается, а просто скрывается. Значок приложения доступен на 
панели задач Windows. Если щелкнуть на этом значке правой кнопкой мыши, то 
отобразится контекстное меню (рис. 4.9), с помощью которого можно открыть окно 
XAMPP Control Panel или управлять работой серверов. 


Программное обеспечение И/еҺ-сервера. Устанавливаем и настраиваем программы... 
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Modules 
Service Module 


Apache 
MySQL 
FileZilla 
Mercury 


Tomcat 


58:22 [Apache] 
2:58:22 [Apache] 
2:58:30 [mysq] 
58:30 [mysql] 


Р10(ѕ) 
6504 
10728 


6728 


2:57 50 [main] А! prerequisites found 
57.50 [там] Initializing Modules 

0 [main] Starting СһесК-Тітег 
0 [main] Control Panel Ready 


XAMPP Control Panel v3.2.2 


Рог(5) Actions 
80, 443 Stop Admin 


3306 


Start 


Start Ad 


Start Admir 


Attempting to start Apache арр... 
Status change detected: running 
Attempting to stat MySQL арр... 
Status change detected: running 


XAMPP Control Panel v3.2.2 [ Compiled: Nov 12th 2015 ] 
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Config 
Config 
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Logs 
Logs 
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z A 
g” Config 
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БИ she! 
| Explorer 
Е7 Services 
9) Help 


Ш Quit 


Рис. 4.8. Окно XAMPP Control Panel: серверы Apache n MySQL успешно запуцены 


Рис. 4.9. Контекстное меню приложения XAMPP Control Panel 
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Для проверки работоспособности \!еБ-сервера Apache открываем \еБ-браузер и 
в адресной строке вводим: http://localhost/. В результате должно отобразиться 
приветствие пакета ХАМРР (рис. 4.10). Чтобы проверить работоспособность серве- 
ра MySQL и программы phpMyAdmin, в адресной строке \еБ-браузера набираем: 
http://localhost/phpmyadmin/. Результат успешной проверки показан на рис. 4.11. 


Успешный запуск программы phpMyAdmin уже свидетельствует о работоспособ- 
ности интерпретатора РНР, но мы попробуем получить полную информацию об 
интерпретаторе и заодно научимся запускать программы. Для этого потребуется 
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ГЕ) Welcome to XAMPP х\+ 
Ф) © localhost/dashboard/ E е || пик _ па У а 4 # = 


Apache Friends 


Œ) XAMPP Apache + MariaDB + PHP + 
Perl 


‚ Welcome to XAMPP for Windows 7.2.0 


You have successfully installed XAMPP on this system! Now you сап start using Apache, MariaDB, РНР and other components. You 
can find more info in the FAQs section or check the HOW-TO Guides for getting started with PHP applications. 


XAMPP is meant only for development purposes. It has certain configuration settings that make it easy to develop locally but that are 
insecure if you want to have your installation accessible to others. If you want have your XAMPP accessible from the intemet, make 
sure you understand the implications and you checked the FAQs to learn how to protect your site. Alternatively you can use WAMP, 

| MAMP or LAMP which are similar packages which are more suitable for production. 


| Start the XAMPP Control Panel to check the server status 


Рис. 4.10. Приветствие пакета XAMPP 


/ Hh localhost / 127.0.0.1 |рврм X \ + 


| e (©) localhost/phpmyadmin/ Е ае || Ч лоск жау йа 4 8 = 

Е = | 

phpMyAdmin EESE 
өшес 1% © Іі Базы данных |) SQL (4 Состояние == Учетные записи пользователей % Ещё 
Недавнее Избранное 
Ba Основные настройки Сервер баз данных 
: 8 Создать БД 

ŒL information_schema == Сопоставление кодировки соединения %): • Сервер: 127 0.0.1 ма TCP/IP 
813 mysql г ы | • Тип сервера: MariaDB 

+ 1 рейоптапсе_зспета и овен H • Версия сервера: 10.1.29-MariaDB - 


mariadb.org binary distribution 
• Версия протокола: 10 


астро а еш қ • Пользователь: root@localhost 
н: Е i Б • Кодировка сервера: UTF-8 Unicode 


(88) 


(#4 phpmyadmin 
Fa test 


Ф Язык - Language 9) | Русский - Russian | 


Өте: | pmatomme | 


- т е Арасһе/2 4 29 (Win32) 
* Размер шрифта: | 82% М Ореп561/1.1.04 РНР/7 2.0 
Е: е Версия клиента базы данных: 
Ф” Дополнительные настройки libmysql - пузата 5.0.12-деу - 


20150407 - 514: 
b396954eeb2d1d9ed7902b8bae237b287 | 
z | 
• РНР расширение: mysqli © сий © 
mbstring 49) 
• Версия PHP: 7.2.0 


phpMyAdmin 


_* Информация о версии: 4.7.4, Е 04 


Рис. 4.11. Программа phpMyAdmin 


Программное обеспечение И/ер-сервера. Устанавливаем и настраиваем программы... 403 


изменить содержимое файла index.php, расположенного в папке С\хатрр\ћаосѕ. OT- 
крываем файл в программе Notepad++, удаляем содержимое, а затем вводим код из 
листинга 4.1. 


Листинг 4.1. Вывод полной информации об интерпретаторе РНР 


<?php 
phpinfo(); 
?> 


Сохраняем файл, переходим в Web-6paysep и в адресной строке вводим: 
http://localhost/. Результат успешного выполнения программы показан на рис. 4.12. 


E phpinfo0 x + 
Ф (2 localhost а | Я пос пва ә а 4 52 = 


System Windows NT ASUS 6.2 build 9200 (Windows 8 Home Premium Edition) i586 

Build Date Nov 28 2017 23:47:42 

Compiler MSVC15 (Visual С++ 2017) 

Architecture х86 

Configure Command cscript /nologo configure.js —enable-snapshot-build" "-епаМе-дебид-раск” "~—with-pdo-oci=c:\php-snap- 
build\ideps_auxoracleix86\instantclient_12_1\sdk, shared" ~—with-oci8-12c=c\php-snap-buildideps_auxoracle 
WB6iinstantclient_12_1\sdk,sharedď" "-епабіе-објесі-оџі-йіг=. /05]/ "—enable-com-dotnet=shared" "—without- 
analyzer” ——with-pgo" 

Server API Apache 2.0 Handler 

Virtual Directory Support enabled 

Configuration File (php.ini) Path C:\Windows 

Loaded Configuration File Сл\хатрр\рһр\рһр.іпі 

Scan this dir for additional іпі files (none) 

Additional „ini files parsed (none) 

PHP API 20170718 

PHP Extension 20170718 

Zend Extension 320170718 

Zend Extension Build АРІ320170718,75,УС15 

РНР Extension Build API20170718,TS,VC15 

Debug Build no 

Thread Safety enabled 

Zend Signal Handling disabled 

Zend Memory Manager enabled 2 


Рис. 4.12. Результат выполнения функции phpinfo () 


Помимо РНР, пакет ХАМРР содержит поддержку языка программирования Регі. 
Программы, написанные на языке Perl, нужно размещать в папке C:\xampp\cgi-bin, а 
не в папке Сл\хатрр\ћіаосѕ. После установки пакета эта папка содержит несколько 
тестовых программ. Давайте проверим работоспособность Perl. Переходим в Web- 
браузер и в адресной строке вводим: http://localhost/cgi-bin/perltest.cgi. Если 
на У/еВ-странице отобразился заголовок GCI with MiniPerl, то все работает npa- 
ВИЛЬНО. 
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4.3. Структура каталогов сервера Арасһе 


Итак, сервер установлен и запушен. Теперь давайте рассмотрим каталоги сервера 
Apache, их содержание и назначение. В папке САхатррарасһе находятся следующие 
каталоги: 


o 


o 


bin — здесь располагается главный исполняемый файл сервера (httpd.exe) и nc- 
полняемые файлы вспомогательных утилит; 


conf — каталог, где находятся конфигурационный файл сервера (httpd.conf) и дру- 
гие файлы конфигурации сервера Арасһе; 


error — каталог для файлов с сообщениями об ошибках (например, если sanpa- 
шиваемый файл не найден); 


icons — здесь содержится ряд изображений, используемых в листингах катало- 
гов; 


include — набор заголовочных файлов, необходимых для разработки дополни- 
тельных модулей (нам они не понадобятся); 


і — набор библиотечных файлов, предназначенных для разработки дополни- 
тельных модулей (они также нам не нужны); 


logs — в этой папке находятся журналы регистрации посещений (ассезз.109) 
и ошибок (error.log), позволяющие получить подробную информацию обо всех 
запросах и ошибках. Открыть эти файлы можно с помощью любого текстового 
редактора (например, Notepad++); 


manual — здесь находятся файлы документации. Просматривать документацию 
следует не в этом каталоге, а набрав в командной строке \еБ-браузера: 
http://localhost/manual/. Не пытайтесь набрать этот адрес прямо сейчас. Доку- 
ментация по этому адресу будет доступна после того, как мы внесем изменения 
в конфигурационный файл. Для этого нужно в конфигурационном файле 
httpd.conf (C:\xampp\apache\confihttpd.conf) убрать символ комментария (+) перед 
строкой: 

#Include conf/extra/httpd-manual.conf 


и перезагрузить сервер; 


С modules — этот каталог содержит подключаемые модули. 

Следующие каталоги, расположенные в папке С\хатрр, также относятся к серверу 
Арасһе: 

O htdocs — здесь должны располагаться файлы в форматах HTML и РНР, а также 


другие файлы, которые будут доступны при наборе http://localhost/ в адрес- 
ной строке \!еБ-браузера (например, изображения, файлы каскадной таблицы 
стилей ит. д.). 


С этим каталогом мы будем работать постоянно. Поэтому удобно добавить яр- 
лык к нему на рабочий стол. Для этого щелкаем на названии каталога правой 
кнопкой мыши, в контекстном меню выбираем пункт Отправить и в появив- 
шемся подменю выбираем пункт Рабочий стол (создать ярлык); 
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С cgi-bin — каталог для ССІ-программ (программ, написанных на языках Perl, С 
ит. д.). 


После установки сервера в каталоге htdocs находится приветствие пакета XAMPP, 
которое мы видим при наборе веер: //1оса1ћоѕ+/ в адресной строке У/ер-браузера. 
Файл по умолчанию, содержимое которого будет отправлено \еБ-браузеру, дол- 
жен иметь название index.php, іпдех.һіті и т. д. Полный список файлов по умолчанию 
определяет директива DirectoryIndex в конфигурационном файле httpd.conf. Причем 
порядок указания названий файлов задает приоритет: если вначале указан файл 
index.php, а затем index.html, то при наличии двух файлов будет запущен файл 
index.php. Чтобы в этом случае получить содержимое файла index.html, нужно его Ha- 
звание указать явным образом: http://localhost/index.html. 


В пакете XAMPP по умолчанию для РНР задана кодировка ОТЕ-8, а для HTML- 
документов кодировка по умолчанию не указана. Давайте это исправим. Редакти- 
ровать конфигурационный файл httpd.conf мы не станем, а просто добавим в каталог 
C:\xamppìhtdocs файл .Массеѕѕ. Этот файл позволяет изменять значения некоторых 
директив для каталога, в котором он расположен, и для всех вложенных подкатало- 
гов. Обратите внимание: у файла нет имени, только точка и расширение. В файл 
„htaccess добавим следующие директивы: 


DefaultLanguage ru 
AddDefaultCharset UTF-8 


Файл .htaccess обрабатывается при каждом запросе файла, тогда как конфигураци- 
онный файл httpd.conf обрабатывается только один раз при запуске сервера Apache. 
Поэтому при изменении файла .Массеѕѕ перезагружать сервер нет необходимости, 
а при изменении файла httpd.conf это нужно делать в обязательном порядке. На вир- 
туальном хостинге можно будет использовать только файл .Массеѕѕ. 


При изучении РНР мы будем иногда работать с кодировкой windows-1251. Так как 
по умолчанию для РНР задана кодировка ОТЕ-8, то при запуске программы без 
явного указания кодировки мы получим знаки вопроса вместо русских букв. Чтобы 
этого избежать, в каталоге С\хатрр\ћійосѕ создадим два каталога: ср1251 и ий8. 
В каталоге ср1251 будем хранить файлы в кодировке windows-1251, а в каталоге 
инв — в кодировке ОТЕ-8. В каталог ср1251 добавляем файл .Массевв со следующи- 
ми директивами: 


DefaultLanguage ru 
AddDefaultCharset windows-1251 
php value default_charset "windows-1251" 


В каталог utf8 файл .htaccess добавлять не нужно, т. к. кодировка для PHP задана 
в конфигурационном файле php.ini (он расположен в каталоге C:\xampp\php), а коди- 
ровка по умолчанию для НТМГ-документов будет взята из файла .htaccess, распо- 
ложенного в каталоге C:\xampp\htdocs. 


Для проверки правильности настройки в каталогах ср1251 и иї8 создаем файлы 
с названием index.php. Внутрь файлов добавляем следующий код: 
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<?php 
echo "Русский текст"; 
?> 


При сохранении файлов обратите внимание на кодировку файла с программой. 
Чтобы увидеть кодировку файла в редакторе Notepad++, открываем меню Коди- 
ровки. Для файла index.php, расположенного в каталоге С\хатрр\ћаосѕ\ср1251, дол- 
жен быть установлен флажок Кодировки | Кириллица | Windows-1251, а для фай- 
ла index.php, расположенного в папке C:\xampp\htdocs\utf8, — флажок Кодировать 
в ОТЕ-8 (без ВОМ). Открываем \!еБ-браузер и в адресной строке вначале вводим: 
http://localhost/cp1251/, а затем: http://localhost/utf8/. Русский текст в обоих 
случаях должен отображаться правильно. 


ВНИМАНИЕ! 


При удалении пакета ХАМРР выводится диалоговое окно с запросом удаления папки 
htdocs. Если в этом окне выбрать кнопку ОК, то все проекты будут удалены без воз- 
можности восстановления. Будьте очень внимательны! 


4.4. Файл конфигурации Apache (httpd.conf) 


Файл httpd.conf (C:\xampp\apache\confihttpd.conf) — это основной файл конфигурации 
сервера Арасһе. Открыть и отредактировать этот файл можно с помошью любого 
текстового редактора, например Блокнота или Notepad++. После каждого измене- 
ния в файле конфигурации необходимо перезагрузить сервер, остановив его 
и запустив снова. До перезагрузки он будет работать со старыми параметрами. 


Внутри файла httpd.conf с помощью директивы Include могут подключаться допол- 
нительные конфигурационные файлы (они расположены в каталоге САхатррарасһел 
сопћехіга): 


Include conf/extra/httpd-languages.conf 


4.4.1. Основные понятия 


В файле httpd.conf содержатся директивы, влияющие на работу сервера Apache. Ди- 
ректива представляет собой ключевое слово, за которым следует одно или несколь- 
ко значений. Директивы бывают простыми (изменяющими только одно свойство 
сервера), а могут объединяться в разделы (позволяют изменять сразу несколько 
свойств какого-нибудь объекта). 


Если в начале строки указан символ %, то такая строка является комментарием: 


# ServerAdmin: Your address, where problems with the server should ре 


# e-mailed. This address appears on some server-generated pages, such 
# as error documents. e.g. adminęyour-domain.com 
ServerAdmin postmaster@localhost 


В этом примере первые три строки закомментированы, а четвертая с помощью ди- 
рективы ServerAdmin задает электронный адрес администратора сервера. 


Программное обеспечение И/еБ-сервера. Устанавливаем и настраиваем программы... 407 


4.4.2. Разделы файла конфигурации 


Директивы могут объединяться в разделы, что позволяет ограничить область дей- 
ствия директив отдельным каталогом, набором файлов или набором URL. Сущест- 
вуют следующие разделы: 


п Directory И DirectoryMatch — указывают, что директивы применимы к заданно- 
му каталогу и всем подкаталогам: 


<Directory "С: /хатрр/һёаосз"> 
Options Indexes FollowSymLinks Includes Ехессст 
AllowOverride А11 
Require all granted 

</Directory> 


Раздел DirectoryMatch позволяет использовать регулярные выражения; 


О Files и FilesMatch — указывают, что директивы применимы только к опреде- 
ленным файлам. Символ * соответствует любой последовательности символов, 
а символ ? — любому одиночному символу. В качестве примера запретим дос- 
туп к файлам .Массевв и .һіраввууаі: 


<Ғі1ев ".ҺіЕ*"> 
Require all denied 
</Files> 


Раздел FilesMatch позволяет использовать регулярные выражения; 


О IfModule — указывает, что директивы будут задействованы лишь при загрузке 
указанного модуля: 


<IfModule dir module> 
DirectoryIndex index.html 
</IfModule> 


O Limit и LimitExcept. Limit — указывают, что директивы будут использоваться, 
только когда НТТР-запрос выполнен с помощью одного из указанных методов 
(СЕТ, РО5Т и др.). LimitExcept задает директивы, которые будет применены для 
методов, не указанных в списке аргументов: 


<Шішіс СЕТ POST OPTIONS РВОРЕТМО> 
Require all granted 
</Limit> 


O Location И LocationMatch — определяют, что заключенные в HAX директивы дей- 
етвуют лишь в случае обращения с указанного интернет-адреса: 


<Location /server-status> 


SetHandler server-status 
</Location> 


Раздел LocationMatch позволяет использовать регулярные выражения; 


С virtualHost — определяет, что директивы применимы только к документам ука- 
занного виртуального хоста. Применяется, когда сервер обслуживает множество 
\еб-сайтов с разными именами хостов: 
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<VirtualHost 192.168.0.1:80> 
ServerAdmin мертаѕіегёѕібе. ги 
DocumentRoot /www/docs/site.ru 
ServerName site.ru 
</VirtualHost> 


4.4.3. Обшие директивы. 

Создание домашнего каталога пользователя, 

доступного при запросе http://localhost/~nik/ 

Приведем основные общие директивы сервера Арасһе: 

O ServerName — определяет имя сервера: 
ServerName localhost:80 

П ServerAdmin — задает E-mail администратора сервера: 
ServerAdmin postmaster@localhost 

П ServerRoot — указывает местонахождение каталогов сервера: 
ServerRoot "С: /хатрр/арасһе" 


П DocumentRoot — определяет местонахождение корневого каталога для докумен- 
тов на сервере: 


DocumentRoot "С: /хапрр/ћіаосз" 


П џѕегріг — задает имя каталога, в котором ищутся домашние каталоги пользова- 
телей при получении запроса вроде ћёёєр:/Лосаіћоѕі/-~иѕег/: 


UserDir "С:/хатрр/арасһе/чзек" 


Создадим каталог для пользователя nik. Для этого добавим в каталог 
САхатррарасһе каталог user и создадим в нем каталог пік, в который добавим 
файл index.html со следующим содержанием: 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<title>Crpannuka пользователя Nik</title> 
</head> 
<ройу>Привет всем</роау> 
</html> 


Далее с помощью Notepad++ открываем файл httpd-userdir.conf (который находит- 
ся в каталоге Сл\хатрр\арасһе\сопћехіга), удаляем его содержимое и вставляем 
следующие директивы: 


<IfModule userdir module> 
UserDir "C:/xampp/apache/user" 
<Directory "C:/xampp/apache/user"> 
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AllowOverride All 

Options MultiViews Indexes IncludesNoExec 
<Limit GET POST OPTIONS> 

Require all granted 

</Limit> 

<LimitExcept GET POST OPTIONS> 

Require all denied 


</LimitExcept> 


</Directory> 
</IfModule> 


Сохраняем и закрываем файл. Теперь файл httpd-userdir.conf необходимо подклю- 
чить к основному конфигурационному файлу. Открываем файл httpd.conf и уби- 
раем символ комментария (+) перед строками: 
#Тос1а4е conf/extra/httpd-userdir.conf 
#LoadModule userdir module modules/mod_userdir.so 
Сохраняем и закрываем файл httpd.conf. Перезапускаем сервер Apache. Далее oT- 
крываем Web-6paysep и в адресной строке набираем: http://localhost/~nik/. 
В итоге в окне \!еБ-браузера должна отобразиться надпись Привет всем; 

П Р1аЕ11е — указывает местоположение файла, в котором будет регистрироваться 
исходный процесс сервера: 


Ріағі1е "logs/httpd.piqd" 


С Listen — связывает Apache с определенным портом и (или) ІР-адресом: 


Listen 80 
Listen 12.34.56.78:80 


п Options — Позволяет включить или отключить те или иные опции в различных 
частях сайта. Если опция помечена знаком +, то она добавляется к числу уже 
включенных опций, а если знаком -, то опция отключается. Могут быть заданы 
следующие опции: 
èe All — включает все опции, кроме MultiViews: 


Options All 


е опе — отключает все опции, кроме MultiViews: 


Options Море 


Ф Гхесссі — Позволяет выполнять ССІ-программы в каталоге, отличном от ука- 
занного в директиве ScriptAlias, — например, в каталоге с обычными доку- 
ментами. Для правильной работы необходимо указать директиву AddHandler 
ИЛИ SetHandler: 


<Directory "С: /хатрр/һёаосѕ"> 


Options +Ехессст 
SetHandler cgi-script 
</Directory> 
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% FollowSymLinks — разрешает использование символических ссылок: 


Options +FollowSymLinks 


Ф SymLinksIfOwnerMatch — разрешает символические ссылки, если ссылка ука- 
зывает на объект, который принадлежит тому же пользователю, что и ссылка: 


Options +SymLinksIfOwnerMatch 


e Includes — разрешает использование серверных расширений (SSI): 


Options +Includes 


e IncludesNOEXEC — разрешает серверные расширения, но запрещает команду 
#exec и директиву #include для загрузки ССІ-программ: 


Options +IncludesNOEXEC 


® Indexes — если эта опция включена и заданный по умолчанию файл He Haŭ- 
ден, то сервер генерирует листинг файлов. Если опция выключена, то вместо 
листинга отображается сообшение об ошибке 403: 


<Directory "С: /xampp/htdocs"> 
Options -Indexes 
</Directory> 


Ha виртуальном хостинге эта опция должна быть обязательно выключена, 
иначе пользователь будет видеть все содержимое каталога, в том числе и 
файлы паролей; 


ө MultiViews — включает сопіепі-соответствие — средство, с помощью которо- 
го сервер определяет, какой документ наиболее приемлем для посетителя: 


Options +MultiViews 


4.4.4. Переменные сервера и их использование 


Очень часто бывает необходимо записать какое-либо значение, например путь 
к папке, сразу в нескольких местах файла конфигурации. В таком случае мы можем 
объявить переменную сервера, сохранить в ней это значение, после чего обратиться 
к этой переменной по ее имени. 


Для объявления переменной сервера предусмотрена директива Define: 
Define <Имя переменной> <Значение> 
В имени переменной допустимы лишь символы латиницы и цифры, причем на- 


чинаться имя должно с буквы. Обычно имена переменных набирают прописными 
буквами. 


Создадим переменную SRVROOT и присвоим ей путь к папке, где установлен сервер 
Apache: 


Define SRVROOT "C:/xampp/apache" 
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Для доступа к переменной используется следующий формат: 
${<имя переменной>} 
Примеры: 


ServerRoot "$ { ЗВУВООТ }" 
<Directory "$ { ЅВУКООТ } /ѕіёе1"> 
</Directory> 


Выполнить какие-либо директивы, если переменная определена (или не определе- 
на--- перед именем переменной в этом случае указывается символ 1), позволяет 
директива IfDefine: 


<IfDefine SRVROOT> 

ServerRoot "${SRVROOT}" 
</IfDefine> 
<IfDefine !SRVROOT> 

ServerRoot "С:/хапрр/арасһе" 
</IfDefine> 


4.4.5. Директивы управления производительностью 


При увеличении нагрузки на сервер создаются новые процессы, а при уменьше- 
нии — эти процессы закрываются. Частые запуски и остановки порожденных про- 
цессов снижают производительность сервера, Поэтому необходимо правильно 
настроить следующие директивы: 


С StartServers — число копий процесса сервера, которые будут созданы при 
запуске сервера; 


п Міп5рагебегуегв — минимальное число порожденных процессов; 
п Махдрагезегуегѕ — максимальное число порожденных процессов; 
п MaxRequestWorkers -- максимальное число возможных подключений к серверу. 


Указанные директивы не применимы к платформе Windows. Их нужно заменять на 
StartThreads, MinSpareThreads, МахЅрагеТһгеааѕ И MaxThreads. Также применяются 
следующие директивы: 


С ThreadsPerChild — задает максимальное число потоков, порождаемых каждым 
дочерним процессом сервера Арасһе: 


ThreadsPerChild 150 


С MaxConnectionsPerChild — определяет, сколько запросов может обработать по- 
рожденный процесс за время его существования. Для снятия ограничений необ- 
ходимо указать 0. На платформе Windows директива всегда должна иметь зна- 
чение 0: 


MaxConnectionsPerChild 0 
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4.4.6. Директивы обеспечения 
постоянного соединения 


За обеспечение постоянного соединения отвечают следуюцие директивы: 


O Timeout — задает промежуток времени B секундах, в течение которого сервер 
продолжает попытки возобновления приостановленной передачи данных: 


Timeout 300 


п КеерА11уе — разрешает постоянные соединения: 


КеерА1іуе Оп 


O махк pAliveRequests ограничивает число допустимых запросов на одно CO- 
единение: 


axKeepAliveRequests 100 


Для снятия ограничений необходимо указать 0; 


Пк pAliveTimeout определяет тайм-аут для постоянного соединения: 


KeepAliveTimeout 5 


4.4.7. Директивы работы с языками 


Для работы с языками предназначены следующие директивы: 


O AddDefaultCharset — указывает кодовую таблицу для документов по умолча- 
нию: 


AddDefaultCharset ОТЕ-8 


П AddCharset — устанавливает взаимосвязь между кодовой таблицей символов и 
расширением файла: 


AddCharset 150-2022-0Р .jis 


О RemoveCharset — удаляет взаимосвязь между кодовой таблицей символов и pac- 
ширением файла; 


o AddLanguage -- устанавливает взаимосвязь между языком и расширением файла: 


AddLanguage га .ru 


П RemoveLanguage — удаляет все взаимосвязи между языками и расширениями 
файла; 

П DefaultLanguage — определяет, какой язык должен быть указан в заголовке, если 
для расширения файла не задан определенный язык: 


DefaultLanguage ru 


o LanguagePriority — задает приоритет различных языков: 


LanguagePriority га еп са cs да de el 
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4.4.8. Директивы перенаправления 


Приведем основные директивы перенаправления: 


O Alias и AliasMatch — позволяют предоставить доступ не только к файлам, нахо- 
дящимся в каталоге, указанном в директиве DocumentRoot, но и к другим катало- 
гам сервера. В директиве AliasMatch можно использовать регулярные выраже- 
НИЯ: 


AliasMatch ^/тапџа1 (?:/ (?:ае|еп|еѕ|ги))?(/.*) ?$ 
"С: /хатрр/арасһе/тапиоа1$1" 


П scriptAlias И Ѕсгір+А1іаѕМаёсһ — задают местоположение каталога для ССІ-сце- 
нариев: 


ScriptAlias /сді-Біп/ "С:/хапрр/сді-Біп/" 


Директива ScriptAliasMatch позволяет использовать регулярные выражения; 


П Redirect и RedirectMatch — сообщают, что искомый документ больше не нахо- 
дится в данном месте, и указывают, где можно его найти. Имеют дополнитель- 
ный параметр, указывающий состояние переадресации, который может прини- 
мать следующие значения: 


e permanent — ресурс перемещен навсегда (код 301); 

ө temp — ресурс перемещен временно (код 302); 

e seeother — ресурс был заменен другим ресурсом (код 303); 

ә сопе — ресурс удален навсегда (код 410). 

Директива RedirectMatch позволяет использовать регулярные выражения. 
Пример: 


Redirect permanent /filel.html /file2.html 
RedirectMatch 301 ^/manual (?:/(deļenļes|ru)){2,}(/.*)?$ 
/manual/$1$2 


O RedirectPermanent выполняет перенаправление с состоянием permanent: 


КейігесеРекпапепе /filel.html /file2.html 


П Redirec tTemp — выполняет перенаправление с состоянием temp: 


RedirectTemp /Ғ11е1.һеші /temp_file.html 


4.4.9. Обработка ошибок 


С помощью директивы ErrorDocument можно указать документ, который будет вы- 
дан М№еБ-браузеру при возникновении указанной ошибки: 


ErrorDocument 404 /err/error404.html 


Обычно указываются директивы (и разрабатываются соответствуюшие документы) 
для следующих ошибок: 
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С 401 — пользователь не авторизован; 


O 403 — нет доступа. При отсутствии индексного файла в каталоге и отключенной 
ОПЦИИ Indexes директивы Options генерируется именно эта ошибка; 


O 404 — ресурс не найден. 


4.4.10. Настройки ММЕ-типов 


При передаче файла сервер указывает МІМЕ-тип документа. Это позволяет Web- 
браузеру правильно обработать получаемый файл. МІМЕ-тип указывается в фор- 
мате: 


<Категория>/<Тин файла> 

Примеры: 

С text/html — для НТМГ-документов; 

С image/gif — для изображений в формате GIF; 

П application/msword — для документов в формате Word; 
O audio/mpeg — для аудиофайлов MP3. 


Конфигурации МІМЕ-типов находятся в файле mime.types (C:\xampp\apache\conf\imime. 
types). Для настройки МІМЕ-типов и смежных вопросов используются следующие 
директивы: 


П AddEncoding — устанавливает взаимосвязь между определенной кодировкой и 
расширением файла: 


AddEncoding pkzip .zip 


С RemoveEncoding — удаляет взаимосвязь между определенной кодировкой и pac- 
ширением файла: 


RemoveEncoding .zip 


П TypesConfig — указывает расположение конфигурационного файла с настройка- 
ми ММЕ-типов: 


т 


урезСопЕ1а conf/mime.types 


П лаатуре — позволяет добавить новый МІМЕ-тип и связать его с определенным 
УР 
расширением: 


ДааТуре text/html .shtml 


С RemoveType — удаляет связи между МІМЕ-типами и расширениями: 


КепочеТуре .сді 


П гогсетуре — указывает МІМЕ-тип для набора файлов. Присваивает файлам, yka- 
занным в разделе <Directory> ИЛИ <Е11ез>, определенный МІМЕ-тип, не прини- 
мая во внимание расширения файлов; 


O AddHandler — связывает определенный обработчик с файловым расширением: 


AddHandler type-map .уаг 
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С SetHandler — обеспечивает обработку файлов в разделах <Пігесіогу> ИЛИ 
<Files> с помощью определенного обработчика: 


<Ғі1ев *.html> 
SetHandler type-map 
</Files> 


С RemoveHandler — отменяет связывание определенного обработчика с файловым 
расширением: 


RemoveHandler .уаг 


В директивах AddHandler И SetHandler могут быть указаны следующие обработ- 
чики: 


e default-handler — обработчик по умолчанию, который используется для 
обслуживания НТМГ-документов, файлов изображений (т. е. файлов, не тре- 
бующих предварительной обработки); 


e send-as-is — посылает файл, содержащий в себе НТТР-заголовки, как есть 
(без добавления пакетных или НТТР-заголовков). Заголовки можно указы- 
вать в самом файле, отделяя их от основного содержимого пустой строкой; 


e cgi-script — обрабатывает файл как ССІ-скрипт; 
e іпар-ғі1е — обрабатывает файл как карту-изображение; 


 сегуег-іпҒо-- возвращает конфигурационную информацию сервера. Необ- 
ходимо, чтобы был подключен модуль той іпѓо.50: 


<Location /info> 
SetHandler server-info 
</Location> 


® server-status — возвращает отчет о состоянии сервера. Необходимо, чтобы 
был подключен модуль той _status.so: 


<Location /status> 


SetHandler server-status 
</Location> 


e type-map — обрабатывает файл как файл сопоставления типов: 


AddHandler type-map .var 


В этом примере все файлы с расширением var будут использоваться как фай- 
лы сопоставления типов. 


Пример файла сопоставления типов: 


URI: index.html.en 

Content-Language: en 

Content-type: text/html; charset=ISO-8859-1 
URI: index.html.ru.koi8-r 

Content-Language: ru 

Content-type: text/html; charset=KOI8-R 
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С Action — устанавливает соответствие между заданным названием обработчика 
или М МЕ-типа с определенной программой, обеспечивающей механизм испол- 
нения. Эта директива позволяет создавать собственные обработчики: 


Action image/gif /сді-Біп/іпадез.сді 


Action my-file-type /cgi-bin/program.cgi 
AddHandler my-file-type .xyz 


С CacheNegotiatedDocs — задает режим кэширования сервером результатов пере- 
говоров. Если директива имеет значение оп, то документы, установленные в ре- 
зультате переговоров между сервером и \!еБ-браузером о согласовании MIME- 
типа, языка и способа кодирования, могут быть помещены в кэш: 


CacheNegotiatedDocs оп 


По умолчанию директива имеет значение off. 


4.4.11. Управление листингом каталога 


Управлять отображением листинга каталога позволяют следующие директивы: 


П Гігесеогуіпдех — задает название документа, который будет возвращен по за- 
просу, если не указано название документа (например, http://Alocalhost/): 


Бігесіогуіпдех index.php index.html 


Если вначале указан файл index.php, а затем index.html, то при наличии двух фай- 
лов будет возврашен файл іпдех.рһр. Чтобы в этом случае получить содержимое 
файла index.html, нужно его название указать явным образом: http://localhost/ 
index.html. 


Значение disabled отключает эту функцию; 


С IndexOptions — определяет способ генерирования листинга каталога с помощью 
опций. Если опция помечена знаком +, то она добавляется к числу уже включен- 
ных опций, а если знаком -, то она отключается. Для использования этой дирек- 
тивы необходимо, чтобы ОПЦИЯ Indexes директивы Options была включена. 
Могут быть указаны следующие опции: 


Ф DescriptionWidth— задает ширину столбца описания в символах. Если ука- 
зан знак *, то ширина столбца станет равной ширине самого длинного описа- 
НИЯ: 


IndexOptions +DescriptionWidth=30 


IndexOptions +DescriptionWidth=* 


е FancyIndexing — включает режим, в котором листинг каталога будет иметь 
интерфейс, напоминающий диспетчер файлов; 


e FoldersFirst — устанавливает, что вначале отображаются названия катало- 
гов, а затем названия файлов; 
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е HTMLTable — заставляет оформлять листинг каталога как НТМГ-таблицу в 3a- 
данном формате, а не как список; 


© IconsAreLinks — инструктирует сделать пиктограммы ссылками; 


e IconWidth И IconHeight — задают размеры пиктограмм, отображаемых в лис- 
тинге каталога (по умолчанию 20х22 пикселов): 


IndexOptions +IconWidth=20 +IconHeight=22 
Ф ТопогеСазе — Позволяет игнорировать регистр символов; 
е IgnoreClient — отключает пересортировку листинга файлов по столбцам; 


e Катейіасһ-- устанавливает максимальную длину имени файла, отображае- 
мую в листинге. Если указан знак *, то используется длина самого длинного 
имени файла; 


® ScanHTMLTitles — предписывает отображать в описании файла информацию 
из тега <title>; 


e SuppressColumSorting — отключает сортировку листинга файлов по столб- 
цам; 
® SuppressDescription — удаляет столбец с описанием файлов; 


® SuppressHTMLPreamble — удаляет стандартные открывающие и закрывающие 
теги (<html> и <body>). Применяется, если заданы директивы HeaderName И 
ReadmeName. Указанные этими директивами файлы должны иметь открываю- 
шие теги (для файла, указанного в неадегмате) и закрывающие (для файла, 
указанного в ReadmeName); 


® ЗирргеззТсоп — выключает отображение пиктограмм в листинге каталога; 


® SuppressLastModified — удаляет столбец с датой и временем последнего об- 
новления файла; 


® SuppressRules — отключает вывод разделительных ЛИНИЙ сверху и снизу 
листинга; 


e SuppressSize — удаляет столбец с размерами файлов; 
® TrackModified— включает кэширование листинга каталога; 


e VersionSort — устанавливает режим сортировки файлов с учетом номера 
версии; 


e XHTML — задает формат XHTML 1.0 Transitional (по умолчанию используется 
НТМЕ 3.2); 


Ф Charset — задает кодировку; 


С лаатсог — задает пиктограмму для названия файла или его части (например, 
расширения): 


AddIcon /icons/binary.gif .Біп .ехе 


o 


o 
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даатсопВуТуре — задает пиктограмму для МІМЕ-типов: 


AddIconByType (TXT, /icons/text.gif) text/* 


DefaultIcon — устанавливает пиктограмму, используемую по умолчанию: 


DefaultIcon /icons/unknown.gif 


AddIconByEncoding — связывает пиктограмму с типом кодировки: 


Дай ІсопВуЕпсодіпа (СМР, /icons/compressed.gif) x-compress x-gzip 


AddDescription — устанавливает описание для файла или набора файлов, соот- 
ветствующих шаблону: 


AddDescription "Описание файла" name.html 


Описание отображается в столбце Описание листинга каталога. Оно может 
включать НТМІ-форматирование; 


НеааегМаше — Позволяет изменить стандартный заголовок листинга каталога: 


НеадйеуүМапе HEADER.html 


Если указана ОПЦИЯ SuppressHTMLPreamble, То содержимое файла заменит весь 
верхний колонтитул; 


ВеадтеМмате -- Позволяет изменить стандартный НИЖНИЙ колонтитул листинга 
каталога: 


ВеаатеМмате README.html 


Если указана ОПЦИЯ SuppressHTMLPreamble, ТО содержимое файла заменит весь 
НИЖНИЙ колонтитул; 


ТпаехТопоге — служит для указания файлов, которые не должны быть показаны 
в листинге каталога: 


ТраехТапоге НЕАРЕВ* ВЕАРМЕ* .htaccess 


IndexOrderDefault — позволяет изменить первоначальную сортировку листинга 
каталога (по умолчанию файлы сортируются по имени). Первый аргумент задает 
порядок сортировки. Может принимать два значения: Ascending (по возраста- 
нию) и Descending (по убыванию). Второй аргумент задает имя поля: Name, Date, 
Size ИЛИ Description: 


IndexOrderDefault Descending Date 


IndexStyleSheet — указывает таблицу стилей, задающую оформление для сгене- 
рированной сервером страницы списка файлов: 


IndexStyleSheet "/css/list.css" 


IndexHeadInsert — задает дополнительный НТМГ-код, который будет вставлен 
в тег <һеаа> сгенерированной страницы со списком файлов: 


IndexHeadInsert "<link rel=\"shortcut 1соп\" 


href=\"/icons/favicon.ico\">" 
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4.4.12. Директивы протоколирования 


Как уже упоминалось, события, происходящие на сервере, регистрируются Арасһе 
в журналах. По умолчанию в каталоге logs (C:\xampp\apache\logs) расположены два 
файла журналов: ассезз.109 и error.log. Эти журналы позволяют получить подробную 
информацию обо всех запросах и ошибках. Открыть эти файлы можно с помощью 
любого текстового редактора (например, Notepad++). 


Файл ассезз.109 содержит следующую информацию: ІР-адрес, дату и время запроса, 
метод (GET или POST), имя запрошенного файла, протокол, код состояния запроса 
(код 200 означает, что файл успешно найден, а 404 — что файл не найден) и размер 
файла. Кроме того, файл может содержать информацию о ссылающейся странице 
(с которой перешел пользователь на наш сайт с другого сайта), а также информа- 
цию о УУер-браузере посетителя. 


Вот пример строки журнала при успешной обработке запроса: 


::1 - - [17/5ер/2017:00:31:02 +0300] "СЕТ /іпаех.рһр НТТР/1.1" 200 10 "-" 
"Мо2111а/5.0 (Windows МТ 6.2; WOW64; гу:32.0)" 


А вот пример строки журнала при отсутствии файла (ошибка 404): 


::1 - - [17/5ер/2017:00:31:10 +0300] "СЕТ /п НТТР/1.1" 404 109 "-" 
"Мо7111а/5.0 (Windows МТ 6.2; WOW64; гу:32.0)" 


Файл error.log содержит информацию об ошибках сервера Apache, а также различ- 
ные предупреждения. Вот пример строки: 


[Sat бер 16 23:57:01.276330 2017] [ssl:warn] [pid 9156:tid 264] АН01909: 
www.example.com:443:0 server certificate does МОТ include ап ТР which 
matches the server nam 


Местоположение и формат журналов задаются с помощью следующих директив: 


О CustomLog — указывает, где расположен журнал регистрации, а также его фор- 
мат: 


CustomLog "logs/access.log" common 


П LogFormat — определяет фактический формат журнала регистрации. Псевдоним 
формата (common) указывается в директиве CustomLog: 


LogFormat "sh %1 %а 90 \"%г\" %>s %р" common 


B етроке формата могут присутствовать следуюцие символы, которые заменя- 
ются фактическими значениями: 


% зп — адрес удаленного хоста (адрес клиента, сделавшего запрос); 

е 51 — удаленное имя пользователя. Практически всегда содержит прочерк; 
% зи — имя пользователя, прошедшего аутентификацию; 

® 3t — дата и время запроса; 


• %:-- метод, имя запрошенного ресурса и протокол; 
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• °>5 — статус запроса; 

® р — число отправленных байтов; 

® ° (БеҒегег}і — страница, с которой пришел клиент; 

e ° {0ѕег-Адепі}і — МеБ-браузер, используемый клиентом. 


Существуют и другие переменные директивы ІодЕогта+, но они встречаются 
крайне редко, т. к. программы обработки 105-файлов настроены на форматы 
common И combined. С помощью этих программ можно получить статистические 
данные в более удобном формате; 


П Error од — определяет местоположение журнала регистрации ошибок: 


ErrorLog "logs/error.log" 


П LogLevel — позволяет установить уровень регистрации ошибок и диагностиче- 
ских сообщений в журнале error.log. По умолчанию директива настроена на pern- 
страцию аварийных ситуаций (чахп). Могут быть заданы следующие значения: 


debug, info, notice, warn, error, crit, alert ИЛИ emerg: 


LogLevel warn 


П HostnameLookups — если директива имеет значение оп, TO Apache будет регистри- 
ровать полное имя хоста клиента, а не только ІР-адрес. Значение по умолчанию: 


HostnameLookups Off 


4.4.13. Файл конфигурации .htaccess. 
Управляем сервером Арасһе из обычного каталога 


На виртуальном хостинге не предоставляется доступ к главному файлу конфигура- 
ции, т. к. один сервер может обслуживать множество сайтов, принадлежащих раз- 
личным людям. В этом случае для конфигурирования отдельных каталогов исполь- 
зуется файл .htaccess. При изменении этого файла нет необходимости перезагру- 
жать сервер — файлы .Массевв анализируются при каждом запросе файла из 
каталога. 


Если сервер находится в полном нашем распоряжении, то настраивать конфигура- 
цию необходимо в файле httpd.conf, а использование файлов .Һассеѕѕ нужно запре- 
тить, поскольку это сильно влияет на производительность и защиту. Дело в том, 
что, как уже отмечалось, файл httpd.conf анализируется только один раз (при запуске 
сервера), а файлы .Һассеѕѕ — при каждом запросе. Если использование файлов 
„Массезз запрещено, то Apache даже не будет искать эти файлы в каталогах. 


Для настройки файлов .htaccess предназначены следующие директивы: 
П АссеввҒі1еМапе — задает имя файла конфигурации: 


AccessFileName .htaccess 


O AllowOverride — позволяет ограничить перечень директив, которые позволено 
изменятьв файлах „Массез$. Директива может принимать следующие значения: 
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e л11 — позволяет пользователям переопределять в файлах .htaccess глобаль- 
ные параметры доступа: 


AllowOverride All 
Ф None — отключает использование файла .Массев5: 


AllowOverride None 


® ^uthConfig— разрешает директивы авторизации (AuthName, AuthType, 
AuthUserFile, AuthGroupFile, Require и др.): 
AllowOverride AuthConfig 


èe FileInfo— разрешает директивы, управляющие типами документов (даатуре, 
AddLanguage, AddEncoding, ErrorDocument, LanguagePriority и др.): 


AllowOverride FileInfo 


Ф Іпдехев-- Позволяет использование директив, управляющих индексацией 
каталога (AddIcon, DirectoryIndex, ҒапсуІпа xing, HeaderNam и др.): 


AllowOverride Indexes 


® Limit — делает возможным использование директив, управляющих доступом 
к хостам (Allow, Deny И Order): 


AllowOverride FileInfo AuthConfig Limit 


e Options -- разрешает директивы, управляюшие каталогами (Options И 
XbitHack): 


AllowOverride Options 


4.4.14. Зашита содержимого папки паролем 


Ограничить доступ к определенной папке можно с помощью следующих директив: 


П AuthType — задает тип аутентификации. Параметр Basic указывает на базовую 
аутентификацию по имени пользователя и паролю: 


AuthType Basic 


O AuthName — определяет текст, который будет отображен во всплываюшем окне 
запроса: 


AuthName "Restricted area" 


О AuthUserFile — указывает местоположение файла паролей: 


AuthUserFile "${SRVROOT}/data/pass.conf" 


О AuthGroupFile — определяет местоположение файла групп; 


п Require — задает дополнительные требования, которые должны быть выполне- 
ны для предоставления доступа. Могут быть указаны следующие параметры: 


èe valid-user — доступ предоставляется любому пользователю, имя которого 
задано в файле, указанном директивой AuthUserFile, при условии правильно 
введенного пароля; 
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èe user — доступ разрешается только указанным пользователям; 
® group — доступ разрешается только указанным группам пользователей. 
Ограничить доступ к определенной папке можно двумя способами: 


С отредактировав файл конфигурации сервера (httpd.conf) — путь к защищаемой 
папке необходимо указать в разделе <Directory>: 


<Directory "C:/xampp/htdocs/test"> 
AuthType Basic 
AuthName "Restricted area" 
AuthUserFile "${SRVROOT}/data/pass.conf" 
<Limit GET POST> 
Require valid-user 
</Limit> 
</Directory> 


O разместив в защищаемой папке файл htaccess с такими директивами: 


AuthType Basic 

AuthName "Restricted area" 

AuthUserFile "C:/xampp/apache/data/pass.conf" 
<Limit GET POST> 

Require valid-user 

</Limit> 


На виртуальном хостинге доступен только второй способ — предполагающий ис- 
пользование файла .htaccess. На своем локальном компьютере должна быть вклю- 
чена поддержка этого файла в главном файле конфигурации. Чтобы это проверить, 
находим раздел: 


<Directory "С: /xampp/htdocs"> 
</Directory> 


Внутри этого раздела директива AllowOverride должна иметь значение All (значе- 
ние по умолчанию в пакете ХАМРР): 


AllowOverride All 


Если значение было изменено, то сохраняем файл и перезапускаем сервер Apache, 
чтобы изменения вступили в силу. Затем открываем Notepad++ и набираем приве- 
денный ранее код. Сохраняем набранный текст под названием htaccess, предвари- 
тельно создав каталог (например, test) в каталоге Сл\хатрр\ћійосѕ. Создаем любой 
НТМГ-документ и сохраняем его в каталоге test под именем index.html в кодировке 
ОТЕ-8. Содержимое этого файла будет отображаться при успешном входе в Ka- 
талог. 


Теперь сформируем файл паролей. Для этого создадим каталог data в каталоге 
С/\хатрр\араспе. Обратите внимание: мы будем сохранять файл вне корневого ката- 
лога документов сервера — файл паролей не должен быть доступен через Web- 
интерфейс. 
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Создать файл паролей (разз.соп можно с помощью программы htpasswd.exe, pac- 
положенной в папке bin (С\хатрр\арасћһе\бп). Для выполнения программы необхо- 
дима командная строка. Запускаем командную строку и переходим в каталог 
С\хатрр\арасһе\біп: 


С: \Оѕегз\Опісгоѕз>са С: \хатрр\арасһе\ріп 


В командной строке мы увидим приглашение: 

С: \хатрр\арасће\ріп> 

В строке приглашения набираем команду, которая создаст файл С\хатрр\арасће\ 
даїа\раѕѕ.сопѓ и добавит в него информацию о пользователе user1: 


htpasswd -c С: \хатрр\арасһе\дафа\раѕѕ.соп# user1 


Нажимаем клавишу <Enter> — появится приглашение ввести пароль: 


С: \xampp\apache\bin>htpasswd -c C:\xampp\apache\data\pass.conf user1 
New password: 


Вводим пароль (например, pass1) и нажимаем клавишу <Enter> — программа no- 
просит повторить пароль: 


С: \xampp\apache\bin>htpasswd -c C:\xampp\apache\data\pass.conf user1 
New password: ***** 
Re-type new password: 


Повторяем и нажимаем клавишу <Enter>: 


С: \xampp\apache\bin>htpasswd -c C:\xampp\apache\data\pass.conf user1 
New password: ***** 

Re-type new password: ***** 

Adding password for user user1 


B итоге будет в каталоге data создан файл pass.conf со следуюшими данными: 
user1:$apr1$J7s/aTmT$gxaZKa8t1wGBJMRe6MTLPO 
Как видим, пароль pass1 в этом файле отсутствует — точнее, он присутствует B 34- 


шифрованном виде. Тем не менее, чтобы увеличить безопасность сервера, файлы 
с паролями следует сохранять в каталогах, не доступных извне, как мы и сделали. 


Попробуем теперь создать пароль еще для одного пользователя. Для этого 
в командной строке набираем: 


htpasswd -b С: \хапрр\арасве\Чафа\раз$.сопЕЁ изег2 pass2 
Обратите внимание: флаг -c мы заменили флагом -ь, а также указали пароль сразу 


после имени пользователя. Если использовать флаг -с, то файл будет перезаписан, 
и, соответственно, вся старая информация удалена. 


После нажатия клавиши <Enter> информация о новом пользователе и его пароле 
будет добавлена в конец файла pass.conf, который станет выглядеть примерно так: 


user1:$apr1$J7s/aTmT$gxaZKa8t1wGBJMRe6MTLPO 
user2:$apr1l$ryD1631F$z/jODWeXgxde9BztH.Ai11 
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Командная строка т 


Бсе права зашишены. 


\Users\Unicross>cd С:\хатрр\арасйе\Ьтп 


d -c C:\xampp\apache\data\pass.conf useri 


xampp\apache\ t 


Рис. 4.13. Создание паролей в командной строке 


Последовательность ввода инструкций в командной строке показана на рис. 4.13. 


Открываем \!еБ-браузер и в адресной строке набираем: http://localhost/test/. 
Если все сделано правильно, то при попытке открыть любой документ в этой папке 
будет выведено окно для ввода пароля (рис. 4.14). 


Требуется аутентификация 


@ «http://localhost» запрашивает имя пользователя и пароль. Сайт сообщает: «Restricted area» 


Имя пользователя: иегі 


Пароль: eesse 


| ок | Отмена 


Рис. 4.14. Окно для ввода пароля 


ПРИМЕЧАНИЕ 


Не рекомендуется набирать пароли в командной строке, поскольку введенные таким 
образом команды сохраняются в истории командной строки в незашифрованном виде 
и могут стать доступными злоумышленникам. Поэтому нужно не лениться и набирать 
пароли в ответ на приглашение программы Піраззу/а.ехе. 


4.4.15. Управление доступом 


Директива Require пригодится нам и в случае, если мы хотим управлять доступом 
к папке в зависимости от ІР-адреса, с которого поступил запрос, или метода. Здесь 
МЫ будем использовать один из следующих параметров: 
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О all granted — доступ разрешен для всех: 
Require all granted 
П all denied — доступ запрещен для всех: 


Require all denied 


П ір--разрешен доступ лишь с указанных ІР-адресов или подсетей: 

Require ір 192.168 10.0.0.2 

Разрешает доступ лишь с [Р-адресов из подсети 192.168.* и адреса 10.0.0.2; 
П host — разрешен доступ лишь с указанных доменных имен: 


Require host www.test.ru 


O method — разрешен доступ лишь с применением указанных методов: 


Require method POST 


Вставив между наименованием директивы Require и остальными ее параметрами 
слово not, мы укажем, что при выполнении указанного нами условия доступ дол- 
жен, напротив, не предоставляться. Обратите внимание: слово по: можно указывать 
только внутри раздела <RequireAll>. 


Предоставим доступ со всех ІР-адресов за исключением находящихся в под- 
сети 192.168.*: 


<RequireAll> 
Require all granted 
Require not ip 192.168 
</RequireAll> 


Если нам нужно указать сложное условие, состоящее из нескольких простых усло- 
ВИЙ, TO следует воспользоваться следующими разделами: 


п RequireAll — Должны выполняться условия, заданные во всех директивах 


Require: 


AuthType Basic 
AuthName "Restricted area" 
AuthUserFile "${SRVROOT}/data/pass.conf" 
<RequireAll> 
Require ip 192.168 


Require user userl 
</RequireAll> 


Здесь мы предоставляем доступ к папке лишь пользователю userl при условии, 
что он обратился с ІР-адреса, находящегося в подсети 192.168.*; 


п RequireAny — ДОЛЖНО ВЫПОЛНЯТЬСЯ ХОТЯ бы одно условие из заданных в дирек- 
тивах Require: 


AuthType Basic 
AuthName "Restricted area" 
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AuthUserFile "${SRVROOT}/data/pass.conf" 
<RequireAny> 
Require ip 192.168 


Require user user1 
</RequireAny> 


Предоставляем доступ к папке пользователю userl и всем прочим пользовате- 
лям, обратившимся с ІР-адреса, который находится в подсети 192.168.*; 


П RequireNone — не должно выполняться ни одно из условий, заданных в директи- 
вах Require. Раздел <RequireNone> может находиться только внутри другого раз- 
дела — например, внутри раздела <RequireAll>: 


AuthType Basic 
AuthName "Restricted area" 
AuthUserFile "${SRVROOT}/data/pass.conf" 
<RequireAll> 
Require valid-user 


<RequireNone> 


Require user user2 


Require user user3 
</RequireNone> 
</RequireAll> 


Предоставляем доступ к папке всем авторизованным пользователям, за исклю- 
чением user2 И user3. 


ВНИМАНИЕ! 


Директива Require и разделы <RequireAll>, <RequireAny> И <RequireNone> в конфигу- 
рационном файле httpd.conf должны быть расположены внутри раздела <р1кескогу>. 
В файле .htaccess раздел <Directory> указывать не нужно. 


ПРИМЕЧАНИЕ 


В предыдущих версиях Арасһе для управления доступом использовались директивы 
Order, Allow И Deny. Эти директивы доступны и в версии 2.4, но они объявлены уста- 
ревшими и не рекомендуются к использованию. 


4.4.16. Регулярные выражения, 
используемые в директивах 


Некоторые директивы позволяют использовать регулярные выражения. Эти выра- 
жения мало чем отличаются от регулярных выражений JavaScript (см. разд. 3.8). 
В них допустимы следующие метасимволы и специальные конструкции: 


С ^ — привязка к началу строки; 
С $ — привязка к концу строки; 


O п — позволяет указать символы, которые могут встречаться на этом месте 
в строке. Можно привести символы подряд или указать диапазон через тире; 
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С [^] — значение можно инвертировать, если после первой скобки указать CHM- 
вол ^. Так можно указать символы, которых не должно быть на этом месте 
в строке. 


Для использования специальных символов в качестве обычных необходимо 
перед специальным символом указать символ \; 


O \а — любая цифра; 
П \„ — любая латинская буква, цифра или знак подчеркивания; 


С \5 — любой непечатаемый символ (пробел, табуляция, перевод страницы, новая 
строка или перевод каретки); 


. (точка) — любой символ, кроме символа перевода строки (хп); 
\р — не цифра; 


\W — не латинская буква, не цифра и не знак подчеркивания; 


o 

o 

o 

П \s— не непечатаемый символ; 

П {n} — вточности n вхождений предыдущего символа или подвыражения в строку; 
П (п,)-пили более вхождений символа в строку; 

О 


{n,m} — не менее n вхождений символа в строку и не более п. Цифры указыва- 
ются через запятую без пробела; 


х — ноль или большее число вхождений символа в строку; 
+ — ОДИН ИЛИ большее число вхождений символа в строку; 
з — НОЛЬ или одно число вхождений символа в строку; 

n |m — ОДИН ИЗ СИМВОЛОВ п ИЛИ п. 


Регулярное выражение можно разбить на подвыражения с помощью круглых 
скобок. Каждая группа символов, соответствующих подвыражению, сохраняется 
в памяти. В дальнейшем группу символов можно извлечь, указав после символа $ 
номер скобки: 


AliasMatch ^/manual(?:/(?:deļen|ru))?(/.*)?$ "С: /хатрр/арасһе/тапџа1$1" 


4.4.17. Создание виртуальных серверов 


Виртуальные серверы создаются с помощью раздела <VirtualHost> И ПОЗВОЛЯЮТ 
размещать на одном сервере несколько сайтов. 


Попробуем создать на сервере два новых сайта: один сайт будет доступен по 
ІР-адресу 127.0.0.2 и имени віге1, а второй — по ІР-адресу 127.0.0.3 и имени site2. 
Для этого в каталоге САхатррһарасһе создаем два каталога: зйе1 и вйе2. 

В каталог вйе1 добавляем файл index.html следующего, например, содержания: 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
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<meta charset="utf-8"> 
<Е1Е1е>Новый сайт 1</title> 
</head> 
<роду>Это сайт 1</body> 
</html> 


В каталог site2 добавляем файл index.html следующего содержания: 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<Е1Е1е>Новый сайт 2</title> 
</head> 
<роау>Это сайт 2</body> 
</html> 


Открываем файл httpd-vhosts.conf (который расположен в папке C:\xampp\apache\ 
сопћехіга). Все инструкции в этом файле должны быть закомментированы. Добавим 
в конец файла следующие строки: 


<VirtualHost %:80> 
DocumentRoot "C:/xampp/htdocs" 
ServerName localhost 
</VirtualHost> 


<VirtualHost 127.0.0.2:80> 
ServerAdmin webmaster@sitel 
DocumentRoot "${SRVROOT}/site1l" 
ServerName sitel 

</VirtualHost> 

<Directory "$ { ЅВУКООТ } /ѕіёе1"> 
Options -Indexes +Includes +FollowSymLinks 
AllowOverride All 
Require all granted 
AddDefaultCharset UTF-8 

</Directory> 


<VirtualHost 127.0.0.3:80> 
ServerAdmin webmaster@site2 
DocumentRoot "${SRVROOT}/site2" 
ServerName site2 

</VirtualHost> 

<Directory "${SRVROOT}/site2"> 
Options -Indexes +Includes +FollowSymLinks 
AllowOverride All 
Require all granted 
AddDefaultCharset UTF-8 

</Directory> 
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Сохраняем и закрываем файл. Теперь его необходимо подключить к главному кон- 
фигурационному файлу httpd.conf. Открываем файл httpd.conf и проверяем, убран ли 
символ комментария (+) перед строкой: 


Include conf/extra/httpd-vhosts.conf 
Сохраняем файл httpd.conf и перезагружаем сервер. Теперь открываем Web-6pay3ep 


и в адресной строке набираем: һеер://127.0.0.3/. В итоге в окне \еБ-браузера 
должна отобразиться надпись Это сайт 2. 


Для того чтобы можно было использовать доменные имена (sitel H site2), необхо- 
димо в конец файла hosts (расположенного в папке C:\Windows\System32\Drivers\etc) 
дописать две строки: 


127.0.0.2 sitel 
127.0.0.3 site2 
ВНИМАНИЕ! 


Для редактирования файла hosts необходимы права администратора. Через поиск Ha- 
ходим приложение Блокнот, щелкаем на нем правой кнопкой мыши и выбираем пункт 
Запуск от имени администратора. В меню Файл выбираем пункт Открыть и нахо- 
дим файл. Открываем его, вставляем строки и сохраняем файл. 


Теперь открываем \еБ-браузер и в адресной строке набираем: http://site2/. 
В итоге в окне МеБ-браузера снова должна появиться надпись Это сайт 2. 


Теперь нам доступны три виртуальных хоста: localhost, sitel И 51%е2. Причем ОНИ 
расположены на разных ІР-адресах и не зависят друг от друга. По аналогии можно 
создать и другие хосты. 


ВНИМАНИЕ! 


Название виртуального хоста необходимо указывать без точки. Например, sitel, а не 
sitel.ru. В противном случае вы не сможете попасть на реальный сайт ѕіїе1.ги, не 
удалив строку из файла hosts. 


4.5. Файл конфигурации РНР (php.ini) 


Файл php.ini (C:\xampp\php\php.ini) — это основной файл конфигурации РНР. Открыть 
и отредактировать его можно с помощью любого текстового редактора, например 
Блокнота или Notepad++. 

Если в начале строки указан символ ;, то такая строка является комментарием: 


; Зее the РНР docs for more specific information. 
; http://php.net/manual/ru/ini.php 


Давайте внесем изменения в файл конфигурации. Вначале проверьте значения сле- 
дующих директив: 


extension аӢіг="С: /хапрр/рһр/ехі" 
default сһагѕеі="ОТЕ-8" 
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session.save_path="C: /xampp/tmp" 
display_errors=0n 
ѕһогі ореп tag=0ff 

upload {тр а1х="С: /хатрр/ тр" 


Далее необходимо проверить подключение библиотек (перед директивами не 
должно быть символа комментария): 

extension=mysqli 

extension=gd2 

extension=curl 

extension=mbstring 


ПРИМЕЧАНИЕ 


В предыдущих версиях РНР строки имеют следующий формат: 
ехіепѕіоп=рһр муза11.911. 


Находим строку: 


include _path=C: \xampp\php\ PEAR 


и меняем ее на: 


include path=". ;C:/xampp/php/includes;C:/xampp/php/PEAR" 


Создаем в каталоге C:\xampp\php каталог includes — в нем будут храниться подклю- 
чаемые файлы. 


Находим строку: 

upload max filesize=2M 

и увеличиваем максимально допустимый размер загружаемых файлов до 16 Мбайт: 
upload тах Ғі1еѕіхе=16М 


Заменяем строку: 


date.timezone=Europe/Berlin 


Ha 


date.timezone=Europe/Moscow 


ПРИМЕЧАНИЕ 


Выбрать название зоны для вашей местности можно на странице 
http://php.net/manual/ru/timezones.php. 


Включаем вывод всех сообшений об ошибках. Для этого меняем строку: 


error reporting=E АШ. 6 ~E DEPRECATED & ~E STRICT 


Ha 


error reporting=E ALL 


Проверяем наличие папки C:\xampp\php\logs. Если папки logs нет, то ее нужно CO3- 
дать. В этой папке будет создан файл рһр еггог Іо9, в который будут записываться 
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все сообщения об ошибках в РНР-скриптах. Путь и название файла прописываются 
в директиве error_log: 


error Іод="С: /хатрр/рһр/10ӯѕ/рһр еггог 109" 


Проверяем значения следующих директив: 


display егкогз=Оп 
104 еккокз-Оп 


И в завершение сохраняем и закрываем файл php.ini. С учетом того, что мы будем 
использовать РНР как модуль сервера Apache, после редактирования файла php.ini 
следует перезагрузить сервер, чтобы все настройки были успешно применены. 


Подключение РНР к серверу Apache производится в файле httpod-xampp.conf (он pac- 
положен в каталоге С\хатрр\арасһе\сопћехіга). В файле можно найти следующие 
инструкции: 


LoadFile "С: /хатрр/рһр/рһр7ёзѕ.а11" 
Іоаағі1е "С: /хатрр/рһр/1ірра.а11" 
LoadModule php7_module "С: /хатрр/рһр/рһр7арасће2 4.4911" 


<FilesMatch "Х.рһр5"> 
SetHandler application/x-httpd-php 
</FilesMatch> 


<IfModule php7_module> 
PHPINIDir "C:/xampp/php" 
</IfModule> 


Чтобы проверить основные настройки, следует запустить код из листинга 4.2. 
Набираем код и сохраняем файл под именем index.php в каталоге Сл\хатрр\ћіаосѕ. 
Открываем \еБ-браузер и в адресной строке набираем: һеер://1оса1һовЕ/. 


Листинг 4.2. Проверка корректности настройки РНР 7 


<?php 

$err = array(); 

if (!file_exists ('C:\\xampp\\php\\php.ini')) 

$err[] = "Файл C:\\xampp\\php\\php.ini не существует'; 
$path = php _ ini _ loaded Е11е(); 

if (strtolower ($path) !== 'c:\\xampp\\php\\php.ini') 

$err = "Пути K файлу php.ini He совпадают"; 

if (!file_exists ('C:\\xampp\\php\\ext\\')) 

Ş$err[] = "Папка C:\\xampp\\php\\ext\\ не сушествует"; 
$ext = 111 get ("extension dir"); 


H- 


Е (strtolower ($ext) !== 'c:/xampp/php/ext') 


$err = "Проверьте значение директивы extension дік"; 


біпс = ini get ('include_path'); 
$inc path = '.;c:/xampp/php/includes;c:/xampp/php/pear'; 
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if (strtolower ($іпс) !== біпс раһ) 

$err = 'Проверьте значение директивы include _path'; 
$5е5 = ini get ('session.save_path'); 
if (strtolower ($5еѕ) !== 'c:/xampp/tmp') 

$err = 'Проверьте значение директивы session.save_path'; 
if (!file_exists ('C:\\xampp\\tmp\\')) 

$err[] = "Папка C:\\xampp\\tmp\\ не сушествует"; 
if (!file_exists ('C:\\xampp\\php\\includes\\')) 

$err[] = "Папка C:\\xampp\\php\\includes\\ не сушествует"; 
бірі = ini get ('upload tmp dir'); 
if (strtolower ($upl) !== 'c:/xampp/tmp') 

$err = "Проверьте значение директивы upload tmp dir'; 
if (!extension loaded ('9а')) 

$err[] = "Библиотека GD не подключена"; 
if (!extension loaded ('mbstring')) 

$err = "Библиотека mbstring не подключена"; 
if (!ехіепѕіоп loaded ('mysqli')) 

$err = "Библиотека mysqli не подключена"; 
Şreporting = іпі деї('еггог герогііпд'); 
if ($герогііпд !-- "32767") 

Ѕегг = 'Проверьте значение директивы error герогііпд'; 


Е (count ($err) == 0) 
echo "Ошибок нет"; 


H- 


else { 
echo '<div style="color:red;">'; 
echo implode ('<br>', беге) . '</div>'; 


Если после выполнения кода было выведено сообщение Ошибок нет — значит, все 
настроено правильно, и можно приступать к изучению РНР. 


4.6. Файл конфигурации MySQL (my.ini) 


В состав пакета XAMPP входит сервер баз данных MySQL, а точнее его аналог, 
распространяемый под свободной лицензией, — MariaDB. У MySQL есть свой соб- 
ственный конфигурационный файл с названием ту. (он расположен в папке 
С\хатрр\туза\ т). Открыть и отредактировать его можно с помощью любого TeK- 
стового редактора, например Блокнота или Notepad++. 


Если в начале строки указан символ #, то такая строка является комментарием. Вот 
пример инструкций из этого файла: 


# The MySQL server 

[mysqld] 

port= 3306 

socket = "С: /xampp/mysql/mysql.sock" 
Базедік = "C:/xampp/mysql" 
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tmpdir = "С: /хашрр/ р" 
datadir = "С:/хапрр/туза1/даса" 
pid file = "mysql.pid" 


Для работы c MySQL из программы, написанной на языке PHP, нужно, чтобы был 
запущен не только сервер Apache, но и сервер MySQL. Для этого открываем при- 
ложение XAMPP Control Panel (САхатррхатрр-сопіго!.ехе) и нажимаем кнопки Start 
у пунктов Apache и MySQL. При успешном запуске названия серверов будут вы- 
делены зеленым цветом, а справа отобразятся идентификаторы процессов и номера 
портов, на которых были запущены серверы (см. рис. 4.8). При этом кнопки Start 
будут заменены на кнопки Stop, с помощью которых можно серверы остановить. 


Теперь проверим MySQL на работоспособность. Для этого открываем Notepad++ 
и набираем код, приведенный в листинге 4.3. 


Листинг 4.3. Вывод содержимого базы данных 


<?php 

if (@$db = mysqli_connect ('localhost', 'root', "")) { 
mysqli_query ($db, "SET NAMES `utf8`"); 
$query = 'SHOW TABLES FROM `mysql`'; 
if ($res = mysqli _ query ($db, $query)) { 


echo "<һ2>Содержимое базы данных `mysql`</h2>\n"; 
while ($row = пүздіі Ғеёсһ гом($гез)) { 
echo "Таблица: ' . $row[0] . "<br>\n"; 


} 
else ( 
echo 'Ошибка ' . mysqli_errno ($db) . ' ' . шуза11 егкохг ($db); 


} 
else { 


есһо "Не удалось подключиться к базе данных"; 


} 


?> 


Во второй строке кода с помощью функции mysqli соппес+ () производится под- 
ключение к серверу MySQL. В первом параметре функция принимает название 
хоста (localhost), во втором — имя пользователя (root), а в третьем — пароль 
пользователя. По умолчанию при установке пакета XAMPP для сервера MySQL 
создается пользователь с именем root, который не имеет пароля, поэтому в третьем 
параметре указана пустая строка. Если вы при настройке MySQL указали пароль 
для пользователя root, нужно соответствующим образом изменить вторую строку 
в набранном файле. 


В третьей строке кода с помощью функции mysqli ачесу() задается кодировка 
соединения. В нашем примере указана кодировка ОТЕ-8 (обратите внимание на oT- 
сутствие дефиса в имени кодировки в ЗОГ.-запросе). Если кодировку соединения не 
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указать явным образом, то русские буквы могут отображаться в виде знаков вопро- 
са. Кодировкой UTF-8 мы будем пользоваться постоянно при работе с базами дан- 
ных, поэтому не забудьте указать эту кодировку и для файла с программой (флажок 
Кодировать в ОТЕ-8 (без BOM) в меню Кодировки в редакторе Notepad++). 


Сохраняем файл под именем test.php в каталоге C:\xamppìihtdocs. Открываем Web- 
браузер и в адресной строке набираем: http://localhost/test.php. 


Если в окне У/ер-браузера отобразился текст, приведенный в листинге 4.4, значит, 
все в порядке. 


Листинг 4.4. Содержимое базы данных 


Содержимое базы данных `mysql` 
Таблица: column _ stats 
Таблица: columns ргіу 
Таблица: db 

Таблица: event 

Таблица: func 

Таблица: general 109 

Таблица: gtid slave_pos 
Таблица: help category 
Таблица: help _ keyword 
Таблица: help relation 
Таблица: help topic 

Таблица: host 

Таблица: index stats 

Таблица: innodb index _ stats 
Таблица: innodb table_stats 
Таблица: пар binlog_index 
Таблица: plugin 

Таблица: ргос 

Таблица: ргосѕ ргіу 

Таблица: ргохіеѕ ргіу 
Таблица: го1ез парріп(4 
Таблица: servers 

Таблица: slave master 1пЕо 
Таблица: в1ауе ге1ау 104 іпіо 
Таблица: в1ауе могКкек 1пЕо 
Таблица: $1ом 109 

Таблица: table_stats 

Таблица: tables_priv 

Таблица: time_zone 

Таблица: time zone 1еар second 
Таблица: time _ zone_name 
Таблица: time zone transition 


Таблица: time zone _ transition type 


Таблица: user 
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Если вместо этого текста отобразилось сообщение: Не удалось подключиться к базе 
данных, То проверьте, запущен ли сервер MySQL, а также параметры подключения 
во второй строке кода. 


Если появилось сообшение типа: 


Parse error: syntax error, unexpected "15" (Т ТЕ) іп 
C:\xampp\htdocs\test.php on line 5 


то вы допустили какую-то ошибку при наборе кода — например, забыли поставить 
точку с запятой в конце етроки или пропустили скобку. 


Если отобразилось сообшение такого вида: 


Ошибка 1049 Unknown database 'mysyql' 
TO неправильно указано имя базы данных. 


Если отобразилось сообщение: 


Fatal error: Uncaught Error: Call to undefined function пувд11 соппесе () 
in C:\xampp\htdocs\test.php:2 


значит, не подключена библиотека php_mysqli.dll. Убедитесь, что были исполнены 
все инструкции по настройке РНР, приведенные в разд. 4.5. 


4.7. Программа phpMyAdmin 


Программа phpMyAdmin позволяет наглядно работать с базами данных через Web- 
интерфейс. В пакете XAMPP программа установлена в папку САхатрр\рирМуАдтт 
и доступна по адресу http://localhost/phpmyadmin/. 


Для управления настройками программы предназначен конфигурационный файл 
config.inc.php, расположенный в каталоге С\хатрр\рирМуАатт. В этом файле можно 
найти следующие строки: 


$cfg['Servers'] [$1] ['auth_type'] = 'config'; 
$cfg['Servers!'] [$1] ['user'] = 'root'; 
$cfg['Servers'] [$1] ['password'] = ''; 
$cfg['Servers'] [$1] ['extension'] = 'туза1і! 


Первая строка задает тип идентификации. Значение config означает, что регистра- 
ционные данные пользователя будут браться из конфигурационного файла. Если 
эту строку закомментировать, то логин и пароль нужно будет вводить вручную. Во 
второй строке указывается имя пользователя, а в третьей -- пароль этого пользова- 
теля. Четвертая строка задает имя библиотеки в РНР, используемой для выполне- 
ния запросов к базе данных. 


Теперь попробуем поработать с программой. Открываем У/еһ-браузер и в адресной 
строке набираем: http://localhost/phpmyadmin/ — должно отобразиться окно, по- 
казанное на рис. 4.11. 


Если все надписи выводятся по-английски, выберем в раскрывающемся списке 
Language пункт Русский — Russian. 
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В списке Сопоставление кодировки соединения задается кодовая таблица, 
используемая при работе с базами данных MySQL. Выбираем пункт utf8mb4_ 
ипісойе сі. 


Попробуем создать новую базу данных. Для этого переключимся на вкладку Базы 
данных и в поле Создать базу данных наберем: test2. В списке Сравнение выби- 
раем пункт и 8 сепега! сі и нажимаем кнопку Создать. Через некоторое время 
отобразится сообщение База данных test2 была создана. Вновь созданная база 
тотчас появится в иерархическом списке, расположенном слева, и в списке, что на- 
ходится на вкладке Базы данных. 


В левом иерархическом списке выбираем созданную базу +ез+2. Переходим на 
вкладку ЗОГ. В текстовом поле набираем следующий текст: 


CREATE TABLE `city`ò ( 
`id_city` int(11) NOT NULL auto_increment, 
“паше сісу” varchar (255) default NULL, 
PRIMARY KEY (Cid сі+у`) 
) ENGINE=MyISAM; 


INSERT INTO “сіну” (Cid сібу`, `name сібу`) VALUES 


(1, "Санкт-Петербург"), 
(2, "Москва"), 

(3, "Новгород"), 

(4, "Тверь"), 

(5 


, 'Минск'); 


Нажимаем кнопку Вперед. В итоге отобразится код заданного нами запроса со ста- 
тистическими сведениями. 


Теперь добавим нового пользователя для созданной базы данных. Для этого пере- 
ходим по ссылке Сервер: 127.0.0.1. Далее выбираем вкладку Учетные записи 
пользователей. В открывшейся вкладке переходим по ссылке Добавить учетную 
запись пользователя. В поле Имя пользователя набираем: petr. В списке Имя 
хоста выбираем пункт Локальный. В поле Пароль набираем: 123. Повторяем па- 
роль в поле Подтверждение. Нажимаем кнопку Вперед. 


Добавленный нами пользователь появится в списке, присутствующем на вкладке 
Учетные записи пользователей. Находим его и нажимаем расположенную 
в представляющем его пункте списка гиперссылку Редактировать привилегии. 
На открывшейся странице щелкаем гиперссылку База данных. В списке Добавить 
привилегии на следующую базу данных выбираем базу test2 и нажимаем кнопку 
Вперед — отобразится окно Редактирование привилегий. Устанавливаем флажки 
во всех разделах (Данные, Структура и Администрирование) или сразу устанав- 
ливаем флажок Отметить все. Нажимаем кнопку Вперед. 


После добавления пользователя необходимо перезагрузить привилегии. Для этого 
переходим по ссылке Сервер: 127.0.0.1 и далее — по ссылке Учетные записи 
пользователей. Затем выбираем ссылку Перезагрузить привилегии. В итоге ото- 
бразится сообщение Привилегии были успешно перезагружены. 
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Попробуем отобразить все города из нашей базы данных в алфавитном порядке. 
Открываем Notepad++ и набираем код, приведенный в листинге 4.5. 


Листинг 4.5. Вывод названий городов из базы данных 


<?php 

if (@$db = mysqli_connect ('localhost', 'petr', '123', 'test2')) { 
mysqli_query ($95, "SET NAMES `utf8`"); 
$query = 'SELECT * FROM `сібу` ORDER BY `name city`'; 
if ($res = mysqli _ query ($db, $query)) { 


echo "Содержимое таблицы `city`<br><br>\n"; 
while ($row = mysqli_fetch_assoc ($res)) { 
echo $гом['паше сіку"І . '<br>'; 


} 
else { 
echo 'Ошибка ' . mysqli_errno ($db) . ' ' . mysqli_error ($db); 


} 
else { 
echo "Не удалось подключиться к базе данных"; 


?> 


Сохраняем файл под названием test2.php в каталоге С\хатрр\ћіаосѕ. Открываем Web- 
браузер и в адресной строке набираем: http://localhost/test2.php. 


Если вы получили сообщение Не удалось подключиться к базе данных, то про- 
верьте, запущен ли сервер MySQL, а также параметры подключения во второй 
строке кода. Попробуйте изменить вторую строку следующим образом: 


if (@$db = туѕа1і соппесё ('localhost', "коо", '', 'test2')) { 


Если после этого изменения вы получили список городов, то пользователь petr не 
был создан, или указан неправильный пароль, или привилегии для пользователя не 
заданы. Чтобы увидеть предупреждающие сообщения, уберите символ @ перед 
именем переменной $db. Этот символ отключает вывод предупреждающих сооб- 
щений. 


Результат выполнения кода из листинга 4.5 должен выглядеть следующим образом: 


Содержимое таблицы `city` 


Минск 

Москва 

Новгород 
Санкт-Петербург 
Тверь 
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Если в первой строке отображаются знаки вопроса вместо русских букв, то про- 
верьте кодировку файла с программой, — она должна быть UTF-8. Если вместо 
названия городов отображаются знаки вопроса, то проверьте кодировку соединения 
с базой данных, — она также должна быть ОТЕ-8. Кодировка соединения указыва- 
ется в третьей строке: 


түздіі аџегу ($db, "SET NAMES `utf8`"); 


Для кодировки windows-1251 инструкция будет выглядеть следующим образом: 


түздіі аџегу ($00, "SET NAMES `ср1251`"); 


Если русские буквы все равно отображаются неправильно, то следует проверить 
кодировку, отправляемую сервером — она также должна быть ОТЕ-8. Кодировку 
можно указать внутри программы явным образом. Для этого в самом начале про- 
граммы, сразу после открывающего дескриптора <?php, нужно вставить перенос 
строки и следующую инструкцию: 


header ('Content-Type: text/html; charset=utf-8'); 
В предыдуших разделах мы настраивали кодировку, отправляемую сервером, 


поэтому, если после вставки этой строки, русские буквы стали отображаться пра- 
вильно, то вы не выполнили инструкции по настройке. 


Русские буквы должны отображаться правильно без всяких дополнительных инст- 
рукций. Если это так, то вы готовы изучать РНР и MySQL. 
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Основы РНР. 
Создаем 
динамические У/еһр-страницы 


5.1. Первые шаги 


РНР — это язык программирования, выполняемый на стороне сервера. Программа 
на РНР, в отличие от программ на языке JavaScript, не зависит от программного 
обеспечения клиента и поэтому будет выполнена в любом случае. 


Последовательность инструкций (называемая программой или скриптом) выполня- 
ется интерпретатором языка РНР. Код программы может внедряться в НТМГ-код. 
Эта возможность отличает РНР от других языков, используемых в Интернете, — 
например, от языка Perl. РНР-код обрабатывается на сервере до того, как страница 
будет передана \еБ-браузеру. В итоге \!еБ-браузер получит обычный НТМГ-код 
или другой вывод. 


ПРИМЕЧАНИЕ 


В этом издании книги мы рассмотрим возможности РНР версии 7 без оглядки на вер- 
сию 5 и более ранние версии. Если вы используете РНР 5, то для его изучения следу- 
ет воспользоваться предыдущими изданиями книги. 


5.1.1. Первая программа 


При изучении языков программирования принято начинать с программы, выводя- 
щей надпись «Hello, world». Не будем нарушать традицию и продемонстрируем, 
как это выглядит на РНР (листинг 5.1). 


Листинг 5.1. Первая программа 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
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</ 


<?php 


ec 
?> 


<title>Ilepsaa nmporpamma</title> 


head> 
<body> 


NO 


"Hello, world"; 


</body> 
html> 


</ 
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Набираем код в Notepad++ и сохраняем файл в формате РНР (под именем, напри- 
мер, index.php) в каталоге C:\xampp\htdocs. В меню Кодировки должен быть установ- 
лен флажок Кодировать в ОТЕ-8 (без ВОМ). Запускаем \еБ-браузер и в его 
адресной строке набираем: http://localhost/. В итоге в окне \МеБ-браузера отобра- 
зится надпись Hello, world. 


Теперь давайте рассмотрим исходный НТМГ-код (листинг 5.2). 


Листинг 5.2. Исходный НТМЁ-код 


<!DOCTYPE html> 

<html lang="ru"> 

<head> 

<meta charset="utf-8"> 
<title>Ilepsaa nmporpamma</title> 
</head> 

<body> 

Hello, world</body> 

</html> 


Как нетрудно заметить, никаких признаков PHP в исходном коде нет. 


НТМГ-теги также можно выводить с помощью оператора echo. Давайте заменим 


содержимое нашего файла на код листинга 5.3. 


Листинг 5.3. Вывод НТМІ -тегов с помощью РНР 


<?php 


ес 
ес 
ес. 
ес 
ес 


NO 
NO 
NO 
NO 
NO 
NO 
NO 
NO 


NO 


NO 


"<!DOCTYPE html>"; 

"<html langa\"ru\ ">"; 

"<head>"; 

Ы <meta charset=\"utf-8\">"; 

" <Е1Е1е>Первая программа</ёіб1Іе>"; 
"</head>"; 

"<body>"; 

"Hello, world"; 

"</роау>"; 

"</html>"; 
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В итоге получим следующий ИСХОДНЫЙ КОД: 


<!DOCTYPE html><html lang="ru"><head> <meta charset="utf-8"> 
<title>Ilepsaa программа</&1Е1е></Беаа><роау>Не11о, world</body></html> 


Как можно видеть, в этом случае весь код отображается на одной строке. Чтобы 
отобразить каждый тег на отдельной строке, необходимо добавить символ перевода 
строки (листинг 5.4). Для системы УМХ таким символом будет \п. В операционной 
системе Windows символ перевода строки состоит из комбинации двух символов: 
NENI; 


Листинг 5.4. Вывод каждого Tera Ha отдельной строке 


<?рһр 

echo "<!DOCTYPE html>\n"; 

echo "<html 1апа=\"ка\">\п"; 

echo "<head>\n"; 

echo " <meta charset=\"utf-8\">\n"; 

echo " <title>Ilepsaa nmporpamma</title>\n"; 
echo "</head>\n"; 

echo "<body>\n"; 


echo "Hello, world\n"; 
echo "</body>\n"; 
echo "</html>\n"; 


Теперь каждый тег будет на своей строчке (листинг 5.5). 


Листинг 5.5. Результат вывода предыдушей программы 


<!DOCTYPE html> 

<html lang="ru"> 

<head> 
<meta charset="utf-8"> 
<title>llepsaa программа</біб1е> 

</head> 

<body> 

Hello, world 

</body> 

</html> 


При выводе НТМГ-тегов с помощью оператора echo следует помнить, что теги 
могут иметь параметры, значения которых заключаются в кавычки. Например, если 
попробовать вывести тег <span> Так, как показано в листинге 5.6, то возникнет 
ошибка 


Parse error: syntax error, unexpected "со1ок" (T_STRING), expecting ',' 
or ';' in C:\xampp\htdocs\index.php on line 8 


442 Глава 5 


Листинг 5.6. Ошибочный код при выводе кавычек 


<?php 

echo "<!DOCTYPE html>\n"; 

echo "<html 1апа=\"ка\">\п"; 

echo "<head>\n"; 

echo " <meta charset=\"utf-8\">\n"; 
echo " <ёіё1е>Первая mporpamma</title>\n"; 
echo "</head>\n<body>\n"; 

echo "<span style="color:red">"; 

echo "Hello, world"; 

echo "</span>\n"; 

echo "</body>\n</html>\n"; 


Обойти эту проблему можно следующими способами: 
П добавить защитный слеш перед каждой кавычкой: 


echo "<span style=\"color:red\">"; 


OB операторе echo использовать не кавычки, а апострофы: 


echo '<5рап style="color:red">'; 


ВНИМАНИЕ! 


Применение апострофов может повлечь за собой другие проблемы. Например, в этом 
случае нельзя использовать специальные символы (\п). Кроме того, если внутри npn- 
сутствует переменная, то вместо ее значения мы увидим имя переменной. 


Все инструкции в РНР заканчиваются точкой с запятой. В отличие от JavaScript, где 
отсутствие этого символа не приводит к сообщению об ошибке, отсутствие точки 
с запятой в РНР влечет за собой остановку выполнения сценария и выдачу сообще- 
ния об ошибке. Это самая распространенная ошибка среди начинающих изучать 
язык РНР. 


Однако если после инструкции сразу идет закрывающий РНР-дескриптор, то точку 
с запятой можно не указывать: 

<?php 

echo "Hello, world" 

?> 


5.1.2. Особенности создания скриптов 
в кодировке ОТЕ-8 


В этом издании книги мы по умолчанию будем использовать кодировку ОТЕ-8. 
Следует учитывать, что русские буквы в ОТЕ-8 кодируются двумя байтами, а не 
одним, как, например, в кодировке windows-1251, а латинские буквы, цифры и cne- 
циальные символы — одним байтом. При работе со строками в кодировке UTF-8 
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важно помнить, что функции, предназначенные для работы с однобайтовыми коди- 
ровками, могут хорошо работать с латинскими буквами, цифрами и специальными 
символами, но абсолютно неправильно с русскими буквами. Например, при обрезке 
строки могут появляться символы вопроса. 


Сохранять все предлагаемые в книге файлы РНР-скриптов следует в кодировке 
ОТЕ-8, если иное не оговорено отдельно. При этом нужно иметь в виду еше один 
момент. Ранее уже отмечалось, что при сохранении текстового файла в кодовой 
таблице ОТЕ-8 Блокнот вставляет в его начало особые служебные символы, назы- 
ваемые сокращенно BOM (Byte Order Mark, метка порядка байтов). Эти символы не 
являются обязательными, и они не позволят нам установить заголовки ответа сер- 
вера с помощью функции header () (при условии отключения буферизации вывода). 
Поэтому сохранять файлы следует именно в программе Notepad++, установив пе- 
ред набором кода в меню Кодировки флажок Кодировать в ОТЕ-8 (без ВОМ). 
При копировании кода через буфер обмена советуем вначале сохранить пустой 
файл в кодировке ОТЕ-8 без ВОМ, вставить код из буфера обмена, а затем сохра- 
нить файл с помощью соответствующей кнопки на панели инструментов. 


Если мы хотим создавать страницы в той кодовой таблице, которая указана в на- 
стройках сервера, нам не нужно выполнять никаких дополнительных действий. Но 
если планируется создание страниц в другой кодовой таблице, придется указать 
в программе эту кодовую таблицу явным образом: 


O если сервер настроен на кодировку windows-1251, и планируется использование 
кодировки UTF-8, шаблон программы будет выглядеть так: 


<?php 

header ('Content-Type: text/html; charset=utf-8'); 
// Сюда вставляем примеры в кодировке UTF-8 

?> 


П если же сервер настроен на кодировку ОТЕ-8, но страницы будут создаваться 
в кодировке windows-1251, шаблон программы станет таким: 


<?php 

header ('Content-Type: text/html; charset=windows-1251'); 
// Сюда вставляем примеры в кодировке windows-1251 

?> 


Напомним, что в главе 4 мы выполнили настройку сервера на кодировку І/ТЕ-8. 
Поэтому при работе с этой кодировкой никаких дополнительных инструкций 
вставлять не нужно. Кроме того, в разд. 4.3 мы создали в каталоге C:\xampp\htdocs 
два каталога: иї8 и ср1251. Каталог ий наследует все настройки кодировки от Cep- 
вера. Внутри же каталога ср1251 сервер перенастроен на кодировку windows-1251. 
Поэтому, когда мы будем говорить, что файл с программой нужно сохранить в ко- 
дировке windows-1251, то нужно задать эту кодировку и сохранить файл в каталоге 
C:\xampp\htdocs\cp1251. 
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5.1.3. Методы встраивания РНР-кода 


РНР-код встраивается в документ с помощью дескрипторов, иногда называемых 
также тегами: 


O <?php H ?>: 
<?php echo "Hello, world\n"; ?> 


Приведенное выражение можно записать в более компактном виде: 


<?="Не11о, мог1а\п"?> 


Отключить поддержку этих дескрипторов в РНР 7 нельзя; 
О <?и?> 
<? echo "Hello, world\n"; ?> 


Доступны, только если директива short open tag имеет значение оп 
(см. разд. 4.5). В пакете XAMPP директива short ореп tag имеет значение Off, 
поэтому приведенное выражение будет отправлено М№МеБ-браузеру без обработки 
(отобразите исходный НТМГ-код, чтобы убедиться в этом). При работе с этими 
дескрипторами следует помнить, что могут возникнуть проблемы при выводе 
ХМІ.-документов, т. к. последовательность <?xml ... ?> будет воспринята как 
выделение РНР-кода. 


Если после закрывающего дескриптора не планируется вывода какого-либо текста, 
то закрывающий дескриптор можно не указывать вовсе. В этом случае считается, 
что программа завершается в конце файла. Следовательно, можно написать так: 


<?рһр 
echo "Hello, мог1а\п"; 


Если файл содержит только РНР-код, то такой вариант встраивания является пред- 
почтительным. Кроме того, он позволит избежать ошибок при выводе с помощью 
программы различных данных, например изображений. Ведь любой символ (про- 
бел или символ переноса строки) после закрывающего дескриптора будет отправ- 
лен УУер-браузеру, и мы этого можем даже не заметить. Но такой лишний символ 
приведет к ошибке. 


5.1.4. Комментарии в РНР-сценариях 


Комментарии предназначены для вставки пояснений в текст скрипта, и интерпрета- 
тор полностью их игнорирует. Внутри комментария может располагаться любой 
текст, включая инструкции, которые выполнять не следует. Помните, комментарии 
нужны программисту, а не интерпретатору РНР. Вставка комментариев в код по- 
зволит через некоторое время быстро вспомнить предназначение фрагмента кода. 


Все, что расположено после // или # до конца строки, в РНР считается одностроч- 
ным комментарием: 


// Однострочный комментарий 
# Однострочный комментарий 
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Однострочный комментарий можно записать после выражения: 


echo "Hello, world"; // Однострочный комментарий 
echo "Hello, world"; # Однострочный комментарий 


Если символ комментария разместить перед инструкцией, то она не будет ВЫПОЛ- 
нена: 
// echo "Hello, world"; // Инструкция выполнена не будет 


Если символы // расположены внутри кавычек, то они не являются признаком 
начала комментария: 


echo "// Это НЕ комментарий!!!"; 


Кроме того, существует многострочный комментарий. Он начинается с символов 
/* и заканчивается символами */. 

/ж 

Многострочный комментарий 


жу 


То, что комментарий называется многострочным, отнюдь не означает, что он не 
может располагаться на одной етроке: 


/% Ҡомментарий на одной строке %/ 


Следует иметь в виду, что многострочные комментарии не могут быть вложенны- 
ми, так что при комментировании больших блоков необходимо проверять, что 
в них не встречается закрывающая комментарий комбинация СИМВОЛОВ */. 


Программа Notepad++ позволяет быстро закомментировать фрагмент кода. Для 
этого необходимо выделить одну инструкцию (или сразу несколько инструкций) 
и из контекстного меню выбрать пункт Вкл./Выкл. Комментарий строки. В ре- 
зультате в начало каждой выделенной строки будет автоматически вставлен одно- 
строчный комментарий. 


Если закомментированный блок выделить и повторно выбрать из контекстного 
меню пункт Вкл./Выкл. Комментарий строки, то символы комментариев будут 
автоматически удалены. 


С помощью программы Notepad++ можно также вставить многострочный коммен- 
тарий. Для этого необходимо выделить несколько инструкций и из контекстного 
меню выбрать пункт Закомментировать выделенное. В результате в начало вы- 
деленного фрагмента будут вставлены символы /*, а в конец — символы */. 


Если выделить закомментированный фрагмент кода и выбрать в контекстном меню 
пункт Раскомментировать выделенное, то символы комментария будут удалены. 


5.1.5. Вывод результатов работы скрипта 


Вывести результат можно с помощью двух операторов: 
О есһо — мы уже применяли его для вывода строчки "Hello, world": 


echo "Hello, world"; 
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Можно вывести сразу несколько строк, указав их через запятую: 


есһо "Строка 1", "Строка 2"; 


п print — этот оператор позаимствован из языка Регі: 


print "Hello, world"; 


ВНИМАНИЕ! 
Оператор echo ничего не возвращает, а оператор print возвращает число 1. 


Вывести строку или значение переменной можно еще и так: 


<?="Не11о, мог1а\п"?> 
<?php $x = 10; ?> 


x = <?=$x?> 
Результат: 


Hello, world 
х = 10 


Большие блоки текста можно выводить, например, следующим образом: 


<?php 

echo 'Строка1<рг> 
Строка2<рг> 
CTpoka3<br> 


т. 
, 


?> 


Кроме того, можно воспользоваться синтаксисом, который условно называют «до- 
кумент здесь»: 


<?php 

echo <<<LABEL 
Строка1<рг> 
Строка2<рг> 
СтрокаЗ<рг> 
LABEL; 

?> 


В этом примере многострочный текст располагается между метками (LABEL): 


echo <<<LABEL 


LABEL; 


Вторая (закрываюшая) метка должна обязательно находиться на отдельной етроке 
в самом ее начале. После этой метки должна стоять точка с запятой. 


Для форматированного вывода данных можно воспользоваться функцией printf (). 
Формат функции: 


printf (string $format[, mixed $args[, mixed $...]]) : int 
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В параметре $format указывается строка специального формата, внутри которой 
с помощью спецификаторов задаются правила форматирования. Какие специфика- 
торы используются, мы рассмотрим при изучении форматирования строк. В пара- 
метре $args через запятую указываются различные значения. Функция возврашает 
длину ВЫВОДИМОЙ етроки: 

<?php 

echo 10.5125484, "Ха"; // 10.5125484 

$1еп = ргіпЕЕ("%.2Е", 10.5125484); // 10.51 

printf ("\n Длина строки равна bd", $1еп); 


// Длина строки равна 5 
22 


Обратите внимание: при работе функции printf () с многобайтовыми кодировками 
можно получить неожиданный результат. Кроме того, результат выполнения зави- 
сит от локали. Настройки локали для разных стран отличаются. Например, в одной 
стране принято десятичный разделитель вещественных чисел выводить в виде точ- 
ки, в другой — в виде запятой. Вот пример настройки локали: 


<?рһр 

ргіпеЕ("%.2ҒАа", 10.5125484); // 10.51 
ѕеі1оса1е (1С А1, "ка КО", 'Russian Вазз1а'); 
printf ("3.2f", 10.5125484); // 10,51 


5.1.6. Буферизация вывода 


Для ускорения работы осушествляется буферизация данных. Иными словами, вна- 
чале выводимая строка помещается в память. Когда количество данных достигает 
определенной величины, данные отправляются УУеһ-браузеру. Для примера вы- 
ведем 5 строк, но перед выводом каждой строки предпишем интерпретатору 
«заснуть» на одну секунду: 
<?рһр 
for (бі = 1; $1 < 6; $i++) { 

echo "Строка ", бі, "<br>"; 

ѕ1еер(1); // "Засыпаем" на 1 секунду 
} 


Результат выполнения этого скрипта мы увидим весь целиком только через 5 се- 
кунд. В некоторых случаях необходимо отправлять данные сразу в \№Меб-браузер. 
Иначе пользователь может подумать, что скрипт завис. Сбросить данные из CHC- 
темного буфера и отправить их пользователю позволяет функция flush (), указан- 
ная после оператора вывода. Следует заметить, что в некоторых случаях (например, 
если указано значение в директиве output_buffering) необходимо дополнительно 
вызывать функцию ob flush (): 
<?php 
for ($1 = 1; $1 < 6; $1++) { 

echo "Строка ", бі, "<br>"; 
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if (ор дес 1еуе1() > 0) ор flush(); 
flush (); // Сбрасываем системный буфер 
з1еер (1); // "Засыпаем" на 1 секунду 


} 


В этом случае строки будут выводиться сразу, а не все одновременно, как это было 
в предыдущем примере. 


Если предварительно включить неявный сброс данных из системного буфера с по- 
мощью функции ob implicit_flush (), ТО вызывать метод flush () не нужно. Следу- 
ет также заметить, что и сами \еб-браузеры могут осуществлять буферизацию. 
Поэтому количество отправляемых данных должно быть больше размера буфера 
\еБ-браузера. Обычно недостающие данные заполняют пробелами, например, 
с помощью функции str раа (): 
<?php 
ор implicit_flush (); 
för ($1 = 1; $1 < 6; $1++) { 

$input = "Строка $i<br>"; 

echo век раа ($іприё, 4095), "Аа"; 

if (ор дес 1еуе1() > 0) ор flush(); 

сіеер(1); // "Засыпаем" на 1 секунду 
} 


Изменить значение директивы output buffering из программы нельзя. Можно это 
сделать либо в файле php.ini: 


output _buffering=0ff 


либо в файлах httpd.conf и .htaccess: 


php value output_buffering 0 


Однако из программы можно сбросить данные из буфера и отключить его с по- 
мощью функции ob end flush(): 
<?php 
echo ini _get('output_buffering'); // 4096 
if (ор get_level() > 0) ор епа flush (); 
ор implicit _flush(); 
for (бі = 1; $1 < 6; $1++) { 
$input = "Строка $i<br>"; 
echo век раа ($іприё, 4095), "Ча"; 
сіеер(1); // "Засыпаем" на 1 секунду 
} 


Итак, мы познакомились с двумя уровнями буферизации вывода. Во-первых, суще- 
ствует системный буфер вывода (нулевой уровень). Во-вторых, при включенной 
директиве output buffering будет использоваться дополнительный буфер. Помимо 
этих уровней, можно создать множество пользовательских вложенных буферов 
внутри программы. Для этого используются следующие функции: 
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o 


Оооо 


О 


o 


ob _start () — включает буферизацию вывода. Каждый вызов этой функции CO3- 
дает новый уровень. Если указано значение в директиве output buffering, ТО 
функция ор start () первый раз вызывается автоматически. Формат функции: 


ob_start ( [callable $output_callback=null[, int 5сһипКк ѕіғе=0[, 
int $flags=PHP_OUTPUT_HANDLER_STDFLAGS]]]) : bool 


B параметре $output callback можно указать функцию, которая будет вызвана 
при сбросе или очистке буфера. Размер буфера можно задать в параметре 
бсһипк віге-- если указано значение о, то сброс содержимого будет осуществ- 
лен перед отключением буфера. Параметр $flags позволяет ограничить перечень 
операций с буфером; 


ор де t level е-е возврашает уровень вложенности или значение 0, если буфе- 
ризация выключена; 

ор дес сопеерез () возврашает содержимое текушего буфера; 

ор get_length() — возвращает количество байтов, содержащихся в текущем 
буфере; 

ор get_status([<true | false>]) — возвращает массив с информацией о статусе 


буфера верхнего уровня, если указано значение false или параметр не задан, или 
о статусе буферов всех уровней, если указано значение true; 


ор _ flush () — сбрасывает данные из текущего буфера; 

ор с1еап() — удаляет все данные из текущего буфера; 

ор епа clean () — удаляет все данные и отключает текущий буфер; 

ор дек сІеап() — возвращает содержимое текущего буфера, очищает его, а 3a- 
тем отключает буфер; 

ор end flush () — сбрасывает данные из текущего буфера и отключает его; 

ор get_flush () — возвращает содержимое текущего буфера, сбрасывает данные, 


а затем отключает буфер. 


Пример использования двух вложенных буферов приведен в листинге 5.7. 


Листинг 5.7. Буферизация вывода 
<?php 
// Отключаем буфер, если для директивы 


// 
if 


ес 


ор. 


ес 
ес 


ор. 


ес 


output_buffering задано значение 

(ор дес 1еуе1() > 0) ор епа Ғ1ч5Һ(); 
ho ор дес 1еуе1(), "Ха"; // 0 
ссагЕ(); // Буфер 1 
ho "Строка1 Ап"; 
һо ор дек 1еуе1(), "Ха"; // 1 

start (); // Буфер 2 


ро "Строка2 Аа"; // Браузер эту строку не получит! 
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5вЕс = ор дее сопёепіѕ(); // Сохраняем содержимое буфера 2 
ob с1еап(); // Очистка буфера 2 

echo ор дек 1еуе1(), "Қа"; // 2 

echo "СтрокаЗ Ха"; 

ор епа flush(); // Сброс и отключение буфера 2 
echo ор дек 1еуе1(), "\п"; // 1 

echo "Строка4 Ха"; 

$str2 = ор дес _flush(); // Сброс и отключение буфера 1 
echo ор дек 1еуе1(), "\п"; // 0 

echo "Содержимое переменной \$str:", $str, "Аа"; 

echo "Содержимое переменной \$str2:", 55іг2, "Аа"; 


В параметре $output callback функции ор start() можно указать функцию, KOTO- 
рая будет вызвана при сбросе или очистке буфера. Функция принимает строку и 
должна возврашать новую строку или ту же самую. Давайте внутри функции пере- 
ведем все символы в верхний регистр (листинг 5.8). 


Листинг 5.8. Обработка данных буфера до вывода 


<?php 
ор загі (function ($str) { 

return пр _strtoupper ($str, 'UTF-8'); 
}); 


есһо "строка"; // Выведет: СТРОКА 
ор епа Ғ1иѕћ (); 


ПРИМЕЧАНИЕ 


Отключать буферизацию или включать неявный сброс данных из системного буфера 
следует только в том случае, если это действительно вам нужно. Во всех остальных 
случаях лучше использовать буферизацию, т. к. благодаря ей повышается быстро- 
действие приложения. 


5.1.7. Преждевременное завершение 
выполнения программы 


В некоторых случаях может возникнуть условие, при котором дальнейшее выпол- 
нение программы лишено смысла. Тогда лучше вывести сообщение об ошибке 
и прервать выполнение программы досрочно. Для досрочного завершения РНР- 
сценария предусмотрен оператор ехі<: 

exit; 


ехік((<Сообшцение или статус завершения>]); 


Основы РНР. Создаем динамические И/еЬ-страницы 451 


Пример: 
<?php 
echo "Строка"; 

exit; 

echo "Эта инструкция выполнена не будет!"; 

Если внутри круглых скобок указана строка, то она будет выведена: 
<?php 

echo "Строка "; 


ехіс("Текст сообщения об ошибке"); 
есһо "Эта инструкция выполнена не будет!"; 


Для досрочного завершения РНР-сценария можно также воспользоваться операто- 
ром die: 

die; 

аіе ([<Сообщение или статус завершения>]); 

Если внутри круглых скобок указана строка, то она будет выведена, а если статус 
завершения, то он не выводится. При нормальном завершении в качестве статуса 
можно отправить число о, а при ошибке — например, число 1: 

<?php 

echo "Строка"; 


die (0); 
echo "Эта инструкция выполнена не будет!"; 


5.2. Переменные и типы данных 


Переменные -- это участки памяти, в которых программа хранит данные. Перемен- 
ная похожа на коробку, в которую можно что-то положить, а через некоторое время 
достать. 


5.2.1. Именование переменных 


Каждая переменная должна иметь в программе уникальное имя, состоящее из 
латинских букв, цифр и знаков подчеркивания. Все имена переменных в РНР начи- 
наются со знака $. После этого символа не может стоять цифра. 


Правильные имена переменных: $x, $strName, $у1, $ папе. 
Неправильные имена переменных: у, ИмяПеременной, $1, $ИмяПеременной. 


Последнее имя неправильное в том числе и потому, что в нем используются 
русские буквы. Хотя на самом деле такой вариант также будет работать, но лучше 
русские буквы все же не применять. 


При указании имени переменной важно учитывать регистр букв: $strName И 
$strname — разные переменные. 
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5.2.2. Типы данных и инициализация переменных 
В РНР переменные могут содержать следующие основные типы данных: 


П bool (или boolean) — логический тип данных. Может содержать значения true 
ИЛИ false (регистр не важен); 


int (ИЛИ integer) — целые числа; 
float (ИЛИ double) — вещественные числа; 


string — строка; 


О 

o 

o 

О object — объекты; 
O array — массивы; 

O resource — идентификаторы ресурсов, например, файлов; 
С мот, — означает, что переменная не содержит значения. 


При инициализации переменной интерпретатор автоматически относит ее к одному 
из типов данных. Значение переменной присваивается с помощью оператора = так: 


$b = true; // роо1 
$x = 7; // ant 

$y = 7.8; // float 
$s1 = "Строка"; // String 
552 = "Строка"; // string 
Sart = (0, 11; // array 
$n = null; // NULL 


PHP в любой момент времени изменяет тип переменной в соответствии с данными, 
хранящимися в ней: 


$var = "Строка"; // тип string 


$var = 7; // теперь переменная имеет тип int 


Функция десеуре(<Имя переменной?) возвращает тип данных переменной (лис- 
тинг 5.9). Для целей отладки можно также использовать функцию var dump (<Имя_ 


переменной>). 


Листинг 5.9. Вывод типа данных переменной 


<?php 
$var = null; 
echo gettype ($уаг), "Ха"; // NULL 


var_dump ($var) ; // NULL 

$var = true; 

echo gettype ($var), "Ха"; // boolean 
var ашр (var) ; // bool (true) 
$var = 7; 


echo gettype ($var), "Ха"; // integer 
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ча 
$v 
ec 
va 
5ч 
ес 
ча 
$v 
ec 
va 


г dump ($var) ; // int(7) 

аг = 7.8; 

ho gettype ($var), "Ха"; // double 

г dump ($var) ; // float(7.8) 

ar = "Строка"; 

ho gettype ($var), "Ха"; // string 

r dump ($var); // string(12) "Строка" 
аг = аггау(); 

ho десеуре(бчак), "Ха"; // array 

г dump ($var) ; // array(0) {} 


Kpome того, существуют функции проверки конкретного типа данных: 


o 


o 


o 


із Боо1(<Переменная>) — возвращает true, если переменная имеет тип bool (ло- 
гический тип данных); 

із іпе(<Переменная>) -- возвращает true, если переменная имеет тип int (целое 
число); 

із іпбедек(<Переменная>) возвращает true, если переменная имеет тип int 
(целое число); 

із Ғ1оаё (<Переменная>) — возвращает true, если переменная имеет тип float 


(вещественное число); 


із аочр1е (<Переменная>) возвращает true, если переменная имеет тип float 
(вещественное число); 

is_string (<Переменная>) — возвращает true, если переменная имеет тип string 
(строка); 

із аггау (<Переменная>) — возвращает true, если переменная имеет тип array 
(массив); 

is_object (<Переменная>) возвращает true, если переменная имеет тип object 
(объект); 

із геѕоџгсе (<Переменная>) — возвращает true, если переменная имеет тип 


resource (ресурс); 


п із 0011 (<Переменная>) -- возвращает true, если переменная имеет значение NULL. 
Проверить тип переменной можно следующим образом: 

$var = 7; 

if (is_int($var)) { 


echo "Переменная $var имеет тип int'; 


5.2.3. Преобразование и приведение типов 


Если функция ожидает один тип, а мы передаем другой, то интерпретатор по умол- 
чанию автоматически пытается выполнить преобразование типов. Для явного ире- 
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образования типов данных можно воспользоваться функцией settype(), которая 
преобразует тип переменной в указанный: 


весеуре(<Переменная>, <Тип>) 

Пример: 

$var = 1.5; 

settype ($var, "string"); 

var dump (var) ; // string(3) "1.5" 


settype ($var, "int"); 
var_dump ($var) ; // іһЕ(1) 


Можно также воспользоваться приведением типов. Для этого перед переменной 
в круглых скобках указывается тип, к которому нужно преобразовать значение пе- 
ременной. 


ВНИМАНИЕ! 


В отличие от функции settype(), приведение типов не меняет тип исходной перемен- 
ной. 


Пример приведения типов: 


5чаг = 0; 

var_dump ($var) ; // int (0) 
$уаг2 = (Боо1)5уак; 

маг dump ($var2) ; // bool (false) 


Значение будет преобразовано B false в следующих случаях: 
С если число равно о или 0.0; 

С если указана пустая строка или строка "0"; 

С если указан пустой массив; 

С если переменная содержит значение null. 

Все остальные значения будут преобразованы в true. 


Для преобразования типов можно также воспользоваться функциями Боо1ча1(), 
іпіёуа1 (), ҒІоағма1(), аочр1еуа1() И strval(): 


5чаг = 0; 

var_dump ($var) ; // іпё (0) 
$уаг2 = роо1уа1 ($уаг); 

маг dump ($var2) ; // bool (false) 


5.2.4. Проверка сушествования переменной 


С помощью оператора isset (<Переменная>) можно проверить существование пере- 
менной. Если переменная существует, то возвращается значение true. Для примера 
переделаем нашу первую программу так, чтобы она «здоровалась» не со всем 
миром, а только с нами (листинг 5.10). 
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Листинг 5.10. Проверка существования переменной 


<?php 


if (1ѕѕеї ($ СЕТ | 'папе'] 


есһо 

} 

else { 
есһо 
есһо 
есһо 
есһо 
есһо 


Е — 


"Не110, ".$ 6 


HI ~ 


{ 


['паше']; 


"Введите ваше имя<ок>"; 


'<form асііоп="! 


$_SERVER['SCRIPT_NAME'] . '">'; 


'<1приЕ type="text" папе-"папе">"; 


'<1приЕ type="submit" уа1ае="ОК">'; 


'</Еоги>!; 


При первом запуске программы появится приглашение ввести имя. Вводим свое 
имя (например, Николай) и нажимаем кнопку ОК. В итоге отобразится приветствие 
Hello, Николай. 


Оператор empty (<Переменная>) проверяет наличие у переменной непустого, ненуле- 
вого значения. Возвращает true, если переменная пустая, не существует или имеет 
нулевое значение. Например, код: 


if (isset ($str)) 


else echo "Нет"; 
echo "<br>"; 
if (empty ($str)) echo "Пустая"; 


else echo "Нет"; 


echo "Сушествует"; 


вернет следующие значения: 


Нет 
Пустая 


А если предварительно инициализировать переменную Ş$str, например, так: 


55 Ер = 


"Строка"; 
if (isset ($36) ) 


else echo "Нет"; 
echo "<br>"; 


if (empty ($str)) 


else echo "Нет"; 


echo "Сушествует"; 


echo "Пустая"; 


то вывод программы будет отображен М№еБ-браузером так: 


Сушествует 


Нет 


5.2.5. Удаление переменной 


Удалить переменную можно с помощью оператора unset (): 


unset (<Переменная>) 
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Этот оператор необходим, если переменная использовалась при обработке данных 
большого объема и теперь не нужна. Удаление переменной позволит освободить 
память компьютера: 


5зіг = "Строка"; 

if (ізѕѕеЁ ($56г)) echo "Существует"; 
е1зе есһо "Нет"; 

unset ($56); 

echo "<br>"; 

if (isset ($str)) echo "Существует"; 
else echo "Нет"; 


Вывод программы: 


Сушествует 
Нет 


5.2.6. Константы 


Константы служат для хранения значений, которые не должны изменяться во вре- 
МЯ работы программы. Создать константу можно с помощью функции define (): 


define (<Имя константы>, <Значение константы>(, <Регистр>1) 


Необязательный параметр <Регистр> может содержать значения true ИЛИ false. 
Если указано true, то интерпретатор не будет учитывать регистр символов при NO- 
иске константы по ее имени, если же задано false или параметр не указан, регистр 
символов имеет значение. 


Обратите внимание: в названии константы принято использовать буквы только 
в верхнем регистре. Если название константы состоит из нескольких слов, то меж- 
ду словами указывается символ подчеркивания. Это позволяет отличить внутри 
программы константу от обычной переменной. 


После объявления константы ее имя указывается в программе без знака $: 


define ('АОТНОВ1', "Николай"); 
echo AUTHOR1, '<br>'; // Николай 
echo author1, '<br><br>'; 


// Предупреждение о неопределенной константе author1 


define ('АОТНОВ2", "Сергей", true); 

echo АОТНОВ2, '<br>'; // Сергей 
echo author2, '<br><br>!'; // Сергей 
define ('АОТНОВЗ', 'Иван', false); 

echo AUTHOR3, '<br>'; // Иван 


echo author3; 


// Предупреждение о неопределенной константе author3 


Создать константу можно также с помощью ключевого слова const: 


const <Имя константы> = <Значение константы>; 
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Регистр имени константы в этом случае имеет значение: 


const AUTHOR = "Николай"; 
echo AUTHOR, '<br>'; // Николай 
echo author; 


// Предупреждение о неопределенной константе author 

Обратите внимание: с помощью ключевого слова const нельзя создать константу со 
значением в виде массива, а вот с помощью функции define () можно: 

define ('MY_CONST', array(1, 2, 3)); 

echo МҮ СОМ5Т(01; // 1 

Kpome того, с помошью ключевого слова const нельзя создать константу внутри 
функции, а вот с помощью функции define () можно: 


function test() { 


define ('AUTHOR1', "Николай"); // OK 
echo AUTHOR1, '<br>'; 
// const AUTHOR2 = "Сергей"; // Ошибка 


} 

Если имя константы нужно составить динамически, то для получения значения 
константы по ее имени в виде строки можно воспользоваться функцией constant (): 
define ("МҮ СОМ5Т', 3); 

echo constant ('MY_CONST'); // 3 

Для проверки существования константы служит функция defined (<Имя константы>). 
Функция возвращает true, если константа объявлена: 


define ('АОТНОВ', "Николай"); 
if (defined ('AUTHOR')) echo 'Объявлена'; 
else echo "Не объявлена!; 


B PHP сушествуют встроенные константы, например: 


граммои; 


С FILE (до и после два символа подчеркивания) — содержит имя файла с mpo- 


ОП LINE (до и после два символа подчеркивания) — содержит номер строки, 
которую обрабатывает интерпретатор в данный момент; 


п РНР 05--- содержит имя и версию операционной системы; 


С PHP_VERSION — содержит версию РНР. 


Пример: 

<?рһр 

echo _ FILE _ . "<рү>"; 
echo _ LINE _ . "<br>"; 


echo PHP_OS . "<br>"; 
echo РНР VERSION . "<br>"; 
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В итоге получим НТМГ-код, отображаемый так: 


С: \xampp\htdocs\index.php 
3 

WINNT 

7220 


Получить полный список всех констант позволяет функция дес аеЕ1теа_ 
constants (): 
print_r(get_defined_constants ()); 


Список очень большой, поэтому приводить его мы здесь не станем -- запустите эту 
инструкцию и посмотрите результат в исходном НТМГ-коде. 


5.2.7. Переменные окружения 


Создадим сценарий, состоящий всего из двух строк: 
<?php 
$var = 10; 


А теперь вопрос: сколько переменных доступно сценарию? Думаете, одна $уаг? 
Давайте перепишем нашу программу и добавим одну строчку: 

<?php 

$var = 10; 

echo 5 5 ЮВУЕВ [ 'РОСОМЕМТ ВООТ" Із 


В результате работы скрипта в окне \!еБ-браузера отобразится следующая строка: 
С: /xampp/htdocs 


Откуда же взялась переменная $ SERVER ['DOCUMENT_ROOT']? Ведь мы ее не создава- 
ли! Ответ на этот вопрос достаточно прост — эта переменная была автоматически 
создана интерпретатором. Такая переменная называется переменной окружения. 


Рассмотренная нами ранее переменная окружения $ SERVER ['DOCUMENT_ROOT'] пред- 
ставляет собой элемент массива 5 ЗЕВУЕВ. Это весьма примечательный массив — 
он доступен не только в глобальной области ВИДИМОСТИ, НОВ любой части скрипта, 
из-за чего и носит название суперглобального. 


Приведем суперглобальные массивы: 


o 5 СЕТ -- массив переменных, переданных посредством метода GET; 


п $_POST -- массив переменных, переданных посредством метода POST; 


11 


О $ ЗЕБУ 


в — массив переменных среды сервера; 


С $_FILES — массив переменных, определяющих отправленные через форму файлы; 


П $_COOKIE 
0 $1 


п $ КЕООЕЅТ — массив всех переменных, вводимых пользователем. Этот массив 
зависит от значения директивы request огаег. 


массив сооКіеѕ-переменных; 


ra 


V — массив переменных, определяющих конфигурацию среды; 
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Вывести значения всех переменных окружения позволяет код из листинга 5.11. 


Листинг 5.11. Переменные окружения 


<рге> 

<?php 

echo "\$ СЕТ\п"; 
ргіпе к(5 СЕТ); 

echo "\п\$_РОЗТ\п"; 
ргіпе к(5 РОЅТ); 

echo "\п\$_ЗЕВУЕВ\п"; 
ргіпе к($ ЗЕВУЕВ); 
echo "\n\$_FILES\n"; 
print_r($_FILES); 
echo "\n\$_COOKIE\n"; 
print_r($_COOKIE); 
echo "\n\$_ENV\n"; 
print_r($_ENV); 

echo "\n\$_REQUEST\n"; 
print_r($_REQUEST) ; 
?> 

</рге> 


, 


Список очень большой, поэтому приводить его здесь мы не станем — запустите 
код и посмотрите результат самостоятельно. 


Рассмотрим наиболее часто используемые переменные окружения: 


О 5 5ЕКУЕЕ(|"БОСОМЕМТ воот'] — путь к корневому каталогу сервера; 

С $ $ЕВУЕВ [ "ВЕМОТЕ_АРОВ' ] — Р-адрес клиента, запрашивающего ресурс; 

С 5 5ЕВУЕВ [ 'ВЕМОТЕ_ОЗЕВ'] — имя пользователя, прошедшего аутентификацию; 

О 5 _SERVER['QUERY_STRING'] — строка переданных серверу параметров; 

С $ 5ЕВУЕВ [ НТТР 05ЕҢ АСЕМТ'] — название и версия \еЬ-браузера клиента; 

С $ $ЕВУЕВ ["НТТР ВЕЕЕВЕВ'] — ОКІ-адрес, с которого пользователь перешел на 
наш сайт; 

С $ 5ЕВУЕВ [ 'ВЕООЕЗТ МЕТНОр'] — метод передачи информации (СЕТ или POST). 


Прежде чем использовать переменные окружения, необходимо проверить сущест- 
вование переменной с помощью оператора isset (): 


if (1ѕѕе ($ ЗЕВУЕВ ['НТТР ВЕЕЕВЕВ'])) { 


echo $ ЗЕВУЕВ [ 'НТТР_В: 


} 


т] 
El 


ERER' ] р 


Предположим, что пользователь заполнил форму с одним текстовым полем, имею- 
ШИМ ИМЯ text1 (name="text1"). При передаче данных методом GET сервер сформиру- 
ет следующие переменные: 
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$ СЕТ['6ехЕ1"] 
$ ВЕООЕЗТ [ "ЕехЕ1"] 


Если передача формы осуществлялась методом POST, то сервер сформирует другие 
переменные: 


$_POST['text1'] 
5 ВЕООЕЅТ ['бехё1'] 


Мы можем извлечь ее значение и присвоить обычной переменной РНР: 


if (1ѕѕе ($ СЕТ['бехі1'])) $text1 = $ СЕТ ['бехі1']; 
else $text1 = ""; 


ИЛИ 


if (isset($_POST['text1'])) Ştext1 = $_POST['text1']; 
else $text1 = ''; 


Аналогичную операцию проше выполнить с помошью оператора ??: 


$text1 = $_GET['text1'] 22 ''; 
ИЛИ 
$text1 = $_POST['text1'] ?? ''; 


Если переменная окружения существует, то переменная 5-ехе1 получит ее значе- 
ние, в противном случае переменной $+ехе1 будет присвоена пустая строка. 


Остальные переменные окружения используются реже, но по названиям их предна- 
значение интуитивно понятно. В дальнейшем мы еще не раз будем возвращаться 
к переменным окружения. 


Управлять порядком обработки суперглобальных массивов позволяет директива 
variables_order в файле php.ini. В пакете XAMPP директива имеет следующее 3Ha- 
чение: 


уаг1ар1ез огаег="СРС$" 


ІЗ 


“ 


Буквы, указанные внутри строки, это первые буквы в именах СЕТ, POST, COOKI! 
ЗЕВУЕВ И ЕМУ. В этом примере отсутствует буква Е, т. к. буква $ всегда эквивалента 
комбинации Е5. Если какая-либо буква не указана, то соответствующий массив не 
создается. 


Более интересен порядок букв в директиве request_order. Эта директива задает по- 
рядок заполнения массива 5 ҺЕООЕ5Т. В пакете XAMPP директива имеет следующее 
значение: 


request огаег="СР" 


Можно указать буквы с, ри с. Обратите внимание: буква с по умолчанию не указа- 
на, следовательно, сооКіеѕ-переменные в массив $ REQUEST добавлены не будут. 
Добавление производится слева направо, при этом старые значения будут переза- 
писаны новыми. Иными словами, если указан порядок GP, то вначале будет создана 
переменная со значением, переданным методом сет, а затем — переменная со зна- 
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чением, переданным методом POST. Если переменные имеют одинаковое имя, то мы 
получим значение, переданное методом POST, а не GET. Если же порядок букв изме- 
нить на противоположный, то, наоборот, мы получим значение, переданное мето- 
ДОМ СЕТ, а не POST. 


5.2.8. Массив $61 ОВАІ $ 


Все глобальные переменные, определенные внутри программы, доступны через 
массив $GLOBALS. Чтобы обратиться к переменной через этот массив, нужно указать 
ее имя в виде строки внутри квадратных скобок. Благодаря тому, что имя перемен- 
ной указывается в виде строки, можно создавать имя динамически во время выпол- 
нения программы: 

<?php 

5х = 10; 

echo ЅСІОВАІ5['х']; // 10 


Мы можем не только получить значение переменной через массив $СТОВАТ, HO A 
создать глобальную переменную: 

<?php 

$СЬОВАТ$ ['х'] = 10; 

echo $x; // 10 


5.2.9. Вывод значений переменных 


Для вывода значений переменных можно воспользоваться оператором есһо: 
$х = 15; 

есһо 5х; 

есһо "Ап Значение переменной равно ", 5х; 


Имя переменной допускается указывать внутри строки. Если строка заключена 
в двойные кавычки, то мы получим значение переменной, а если в одинарные — то 
ее имя. Если нужно получить имя переменной внутри строки в двойных кавычках, 
то перед знаком $ следует указать символ \: 


$х = 15; 
есһо "Значение переменной $х равно ', 5х, "Аа"; 
echo "Значение переменной \$х равно ", $x, "Аа"; 


есһо "Значение переменной \$х равно $х"; 


В результате получим три строки: 

Значение переменной $х равно 15 

Чтобы явным образом выделить имя переменной внутри строки и исключить слия- 
ние имени с другими буквами, следует использовать фигурные скобки: 


$х = 15; 
есһо "{$х} ${х}"; // 15 15 
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Для вывода массивов оператор есһо не подходит. При его использовании мы полу- 
чим предупреждающее сообщение и просто слово Аггау вместо значений элементов 
массива. Вывести значения элементов массива, а также любых других данных 
позволяет функция print к(): 


$х = 15; 

ргіпе к(5х); // 15 

Ѕагг = (|1, 2, 3]; 

ргіпе к(багк); // Array ( [0] => 1 [1] => 2 [2] => 3 ) 


Для целей отладки и поиска ошибок будет полезно не только получить значение 
переменной, но и информацию о типе данных. В этом случае следует воспользо- 
ваться функцией var dump (): 

$x = 15; 

уаг _dump ($x) ; // int(15) 

Sarr = [1, 2, 31; 

var_dump ($arr) ; 

// array(3) { [0]=> int(1) [1]=> int(2) [2]=> int(3) } 


Для вставки значения переменной в НТМГ-код удобно воспользоваться PHP- 
дескрипторами <?-...?>. Однако следует учитывать, что при необходимости нужно 
заменять специальные символы их НТМГ-эквивалентами с помощью функции 
htmlspecialchars (): 


<?php 

$х = 15; 

$txt = "<>"; 

Ş$txt2 = htmlspecialchars ($txt, ЕМТ СОМРАТ | ЕМТ НТМІ5, 
"ОТЕ-8'); 

?> 


<input type="text" паше="х" уа]1ае="<?=$х?>"> 
<input type="text" name="txt" value="<?=$txt2?>"> 


Результат: 


<input type="text" name="x" уа1ае="15"> 
<input type="text" name="txt" value="&1t;&gt;"> 


5.2.10. Ссылки 


Ссылку на значение одной переменной можно сохранить в другой переменной - 
достаточно перед именем переменной указать символ в. После этого любое изме- 
нение значения в одной переменной приведет к изменению значения в другой 
переменной: 


$х = 15; 
$y = &9х; 
var_dump ($x); // 116 (15) 
мас _ dump ($y); // іпі (15) 


Основы РНР. Создаем динамические М/ев-страницы 463 


5у = 20; 
var_dump ($x); // іпё (20) 
мас _ dump ($y); // іпі (20) 
5х - 33; 
var_dump ($x); // int(33) 
var_dump ($y); // int (33) 


Для разрыва связи следует воспользоваться оператором unset (): 


$х = 15; 

$y = &9х; 

var_dump ($x); // 116 (15) 
var_dump ($y); // іпі (15) 
$y = 20; 
var_dump ($x); // 116(20) 
var_dump ($y); // іпі (20) 
unset ($y); 
$y = 33; 
var_dump ($x); // int (20) 
var_dump ($y); // int (33) 


Помимо обычных ссылок (которые иногда называют «жесткими») B PHP сушест- 
вуют символические ссылки (другое их название: «переменные переменных»). Сим- 
волическая ссылка — это строковая переменная, хранящая имя другой переменной. 
Чтобы получить значение такой переменной или изменить его, нужно указать два 
символа $: 


ба = "test"; 
55а = 50 
var_dump ($a); // string(4) "test" 


( 
var dump (${$a}); // int(50) 
var dump ($test); // int (50) 


5.3. Операторы 


Операторы позволяют выполнить с данными определенные действия. Например, 
операторы присваивания служат для сохранения данных в переменной, математи- 
ческие операторы предназначены для арифметических вычислений, а условные 
операторы позволяют в зависимости от значения логического выражения выпол- 
нить отдельный участок программы или, наоборот, не выполнять его. Рассмотрим 
операторы, доступные в РНР, более подробно. 


5.3.1. Математические операторы 


Производить арифметические вычисления позволяют следующие операторы: 
O + — сложение: 


есһо 10 + 15; 7705 


o 


o 
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- — вычитание: 

есһо 35 - 15; // 20 
- — унарный минус: 

$х = 10; 

есһо -$х; // -10 
* — умножение: 


echo 25 % 2; /% 50 


/ — деление. Если в выражении участвуют только целые числа, и деление вы- 
полняется без остатка, то результатом будет целое число. В противном случае 
возвращается вещественное число: 


есһо 10 / 2; // 5 

есһо 10 / 3; // 3.3333333333333 
echo 10.0 / 3; // 3.3333333333333 
есһо 10.0 / 3.0; // 3.3333333333333 


Если нужно выполнить целочисленное деление, то следует воспользоваться 
функцией intdiv(): 


echo intdiv(10, 3); // 3 


Деление числа на 0 приведет к значению плюс или минус INF (бесконечность), 
а деление вещественного числа 0.0 на о — к значению мам (нет числа): 


есһо 10.0 / 0; // INF + Warning: Division Бу zero 
echo -10.0 / 0; // -INF + Warning: Division by zero 
echo 0.0 / 0; // NAN + Warning: Division by zero 

% — остаток от деления: 

есһо 10 % 2; // 0 

echo 10 % 3; Jiii 

echo 10 % 4; #4 2 

echo 10 % 6; // 4 

хх — возведение в степень: 

echo 10 ** 2; // 100 

echo 3 ** 3; // 27 

++ — оператор инкремента. Увеличивает значение переменной на 1: 
$x = 10; 

$х++; // Эквивалентно 5х = $х + 1; 

есһо $х; // 11 

-- — оператор декремента. Уменьшает значение переменной на 1: 
$х = 10; 

5х--; // Эквивалентно $x = $x - 1; 


есһо $х; // 9 
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Операторы инкремента и декремента можно записывать в постфиксной или пре- 
фиксной формах: 


$х++; $х--; // Постфиксная форма 
++$х; --5х; // Префиксная форма 


При постфиксной форме ($x++) сначала возвращается значение переменной, а по- 
том выполняется операция, а при префиксной форме (++5х) — вначале осуществ- 
ляется операция и только потом возвращается значение. Продемонстрируем это на 
примере (листинг 5.12). 


Листинг 5.12. Постфиксная и префиксная формы 


<?php 

$S% = 5; 

$y = $x++; // $y = 5, $x= 6 

echo "<р>Постфиксная форма (\$y = \$х++;) :</b><br>\n"; 
echo "Абу = $y <br>\$x = $x <br>\n"; 

$х = 5; 

$y = ++$х; // $y = 6, 5х = 6 

echo "<р>Префиксная форма (Х5у = ++\$х;) :</р><рг>\п"; 
echo "Абу = бу <br>\$x = $x"; 


В итоге получим следующий результат: 


Постфиксная форма ($y = $х++;): 


б5бу-5 
$х = 6 
Префиксная форма ($y = ++$х;): 
$у = 6 
$х = 6 


Если операторы инкремента и декремента используются в сложных выражениях, то 
понять, каким будет результат выполнения выражения, становится сложно. Напри- 
мер, каким будет значение переменной $y после выполнения этих инструкций? 

5х = 5; 5у = 0; 

$y = ++$х + ++5х + ++$y; 

есһо 5у; Ж Әт? 


Чтобы облегчить жизнь себе и всем другим программистам, которые будут разби- 
раться в программе, операторы инкремента и декремента лучше использовать от- 
дельно от других операторов. 


5.3.2. Побитовые операторы 


Побитовые операторы предназначены для манипуляции отдельными битами. Язык 
РНР поддерживает следуюшие побитовые операторы: 


O - — двоичная инверсия. Значение каждого бита заменяется на противопо- 
ложное: 
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$х = 


100; 


printf ("3032b\n", $x); 


$x = 


printf ("3032b\n", $x); 


~$x; 


O = — двоичное и: 


$х = 


100; $у = 


R AT 
printf ("%0326\п", $y); 


$z = 


printf ("%032р\п", 52); 


$x & $y; 


O | — двоичное или: 


$х = 


100; $у = 


е д 
printf ("%0326\п", $y); 


$z = 


| 
printf ("%032р\п", $z); 
О ^—д 


$х = 


ргіпе 


ргіпе 


52- 


ргіпе 


$x | $y; 


100; $y = 250; 
f ("%032b\n", $x); 


$x ^ $y; 


Е ("3032b\n", $y); 


Е ("3032b\n", $2); 


// 


// 


// 
// 


// 


// 
// 


// 


воичное исключающее или: 


// 
// 


// 


00000000000000000000000001100100 


11111111111111111111111110011011 


00000000000000000000000001100100 
00000000000000000000000001001011 


00000000000000000000000001000000 


00000000000000000000000001100100 
00000000000000000000000001001011 


00000000000000000000000001101111 


00000000000000000000000001100100 
00000000000000000000000011111010 


00000000000000000000000010011110 


О << — сдвиг влево — сдвигает двоичное представление числа влево на один или 
более разрядов и заполняет разряды справа нулями: 


$х = 


ргіпе 


$х = 
prin 
$х = 
ргіп 
$х = 


ргіп 


100; 


5х << 1; 


о 


Зи 


5х << 2; 


Е ("3032b\n", $x); 


Е ("3032b\n", $x); 


Е ("3032b\n", $x); 


Е ("3032b\n", $x); 


// 


УЕ 


// 


// 


0000000000000000000 


зы 


000001100100 


0000000000000000000 


қ” 


000011001000 


0000000000000000000 


EP 


000110010000 


00000000000000000000011001000000 


>> — сдвиг вправо -- сдвигает двоичное представление числа вправо на один 


или более разрядов и заполняет старшие разряды содержимым самого старшего 
разряда: 


$х = 
ргіп 
$х = 
prin 
$х = 
ргіп 
$х = 


prin 


100; 
Ss >ii 
Se А 


SRE Do2 


Е ("3032b\n", $x); 


Е ("3032b\n", $x); 


Е ("3032b\n", $x); 


Е ("3032b\n", $x); 


// 


// 


// 


// 


00000000000000000000000001100100 


00000000000000000000000000110010 


00000000000000000000000000011001 


00000000000000000000000000000110 
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Если число отрицательное, то разряды слева заполняются единицами: 


$х = -127; 

printf ("3032b\n", $x); // 11111111111111111111111110000001 
DAE R >: 

printf ("%032b\n", $x); // 11111111111111111111111111000000 
$x = $x >> 1; 

printf ("%032р\п", $x); // 11111111111111111111111111100000 
5х - 5х >> 2; 

ргіпеҒ("%0320Хлп", $х); // 11111111111111111111111111111000 


5.3.3. Операторы присваивания 


Операторы присваивания предназначены для сохранения значения в переменной. 
Приведем операторы присваивания, доступные в языке РНР: 


o 


= — присваивает переменной значение. Обратите внимание на то, что хотя опе- 
ратор похож на математический знак равенства, смысл у него совершенно ИНОЙ. 
Справа от оператора присваивания может располагаться константа или сложное 
выражение. Слева от оператора присваивания может располагаться только 
переменная или инструкция list (): 


5х = 5; 

есһо 5х; // 5 

$arr = ['Ноль', "Один", "Два", "'Три']; 

list ($var1l, $var2, $var3, $var4) = Ѕагг; 

+= — увеличивает значение переменной на указанную величину: 
$х = 10; 

$х +=5; // Эквивалентно $х = $x + 5; 

есһо 5х; // 15 


---- уменьшает значение переменной на указанную величину: 


$x -= 5; // Эквивалентно $х = $х - 5; 

есһо $х; // 5 

*= — умножает значение переменной на указанную величину: 
$х = 10; 

5х *= Б; // Эквивалентно $х = 5х % 5; 

есһо $х; // 50 

/= — делит значение переменной на указанную величину: 

$х = 10; 

$х /=5; // Эквивалентно $х = $х / 5; 

echo $x; // 2 

%= — делит значение переменной на указанную величину и возвращает остаток: 
$x = 10; 

$x %- Б; // Эквивалентно 5х = 5х % 5; 


есһо 5х; // 0 
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O **=— возведение в степень: 
$х = 10; 
$x **= 2; // Эквивалентно $x = $x %% 2; 
echo $x; // 100 
п < ‚ [=, ^=, <<= И >> побитовые операторы с присваиванием: 
$x = 100; $y = 75; 
$х |= бу; // Эквивалентно $х = $х | 5у; 


printf ("%032р\п", $x); // 00000000000000000000000001101111 


5.3.4. Операторы сравнения 


Операторы сравнения входят в состав логических выражений. Приведем их список: 


О == — равно; 

П === — строго равно; 

О != — не равно; 

О <> — не равно; 

О !== — строго не равно; 
П <— меньше; 

П > — больше; 

С <= — меньше или равно; 
С >= — больше или равно. 


Логические выражения возвращают только два значения: true (истина) ИЛИ false 
(ложь). Вот пример вывода значения логического выражения: 


мас Яшр( 10 == 10 ); // bool (true) 

мас аштр( 10 == 5 ); // bool (false) 

мас Я4шр( 10 != 5 ); // bool (true) 

var 4шр( 10 <> 5 ); // bool (true) 

var dump( 10 5 ); // bool (false) 

var dump( 10 > 5 ); // bool (true) 

var dump( 10 <= 5 ); // bool (false) 

var dump( 10 >= 5 ); // bool (true) 

В чем отличие оператора == (равно) от оператора === (строго равно)? Если исполь- 
зуется оператор ==, интерпретатор пытается преобразовать разные типы данных 
к одному и лишь затем сравнивает их. Оператор ===, встретив данные разных 
типов, сразу возвращает false: 

var_dump(1 == "1"); // роо1 (true) 

мас апр (1 === "1"); // роо1 (Ға1ѕе) 


Значение логического выражения можно инвертировать с помощью оператора !: 


$varl = 5; 
$var2 = 5; 
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var dump( $\аг1 == буаг2 ); // роо1 (true) 
var dump( !(5уаг1 == $уаг2) ); // bool (false) 


Если переменные $уаг1 И 5чаг2 равны, то возвращается значение true, но так как 
перед выражением стоит оператор !, выражение вернет false. 


Можно несколько логических выражений объединить в одно большое с ПОМОЩЬЮ 
следующих операторов: 


O as или апа — логическое и. Логическое выражение вернет true только в случае, 
если оба подвыражения вернут true: 


var dump( (10 == 10) && (5 != 3) ); // bool (true) 
мак Чатр( (10 == 10) 68 (5 == 3) ); // роо1 (Ға1ѕе) 
var dump( (10 == 10) апа (5 != 3) ); // bool (true) 
var dump( (10 == 10) апа (5 == 3) ); // bool (Еа1зе) 


O || или ог — логическое или. Логическое выражение вернет true, если хотя бы 
ОДНО ИЗ подвыражений вернет true: 


var dump( (10 == 10) || (5 != 3) ); // Боо1(ғгие) 
уак _dump( (10 == 10) || (5 == 3) ); // Боо1(ғгие) 
var dump( (10 == 10) ок (5 != 3) ); // Боо1(ғгчае) 
мас dump( (10 == 10) ок (5 == 3) ); // bool (true) 


Если первое подвыражение вернет значение true, то второе подвыражение даже 
не будет вычисляться. Например, в этом выражении деление на 0 никогда не 
будет выполнено (следовательно, и ошибки не возникнет): 


мас Яшр( (10 == 10) || ((10 / 0) > 0) ); // bool (true) 


С хог — логическое исключающее или. Логическое выражение вернет true, если 
хотя бы одно из подвыражений вернет true, но не оба: 


var dump( (10 == 10) xor (5 != 3) ); // bool (false) 
var dump( (10 == 10) хок (5 == 3) ); // bool (true) 
ВНИМАНИЕ! 


Приоритет операторов && и | | выше, чем приоритет операторов апа И or. 


5.3.5. Оператор <=> 


Оператор <=> сравнивает значения двух переменных: $a и $b. Возвращает отрица- 
тельное число, положительное число или число, равное нулю, когда $а меньше, 
больше или равно $5 соответственно: 

echo 1 <=> 2; // -1 

echo 3 <=> 2; // 1 

echo 2 <=> 2; // 0 


Оператор <=> заменяет следующую конструкцию: 
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1Е (ба < 5Ы) $х = -1; 
elseif ($a > $b) $х = 1; 
else $x = 0}; 
echo $x; 


Обратите внимание: оператор <=> выполняет нестрогое сравнение, при котором 
строка может быть преобразована в число. В итоге будут сравниваться числа, а не 
строки. Учитывайте это при сравнении строк: 


var dump("10 а" <=> 10); // іһе(0) 
var ашр ("10" <=> "010"); // іпё (0) 


5.3.6. Оператор 2? 


Если переменная, указанная слева от оператора ??, имеет значение null, то возвра- 
щается значение, указанное справа от оператора. В противном случае возврашается 
значение переменной: 


$x = бу ?? 5; 

var _ dump( $x ); // int(5) 
$y = 10; 

$x = $y ?? 5; 
var _ dump( $x ); // int(10) 
$y = null; 

$x = $y ?? 5; 
var dump( $x ); // int(5) 


Обратите внимание: если переменная не определена, то никакого предупреждаю- 
щего сообщения выдано не будет. Следовательно, оператор ?? можно использовать 
вместо следующей конструкции: 


if (іззес(5у)) $x = бу; 
else $x = 5; 


Согласитесь, что эта инструкция выглядит значительно нагляднее: 
$x = $y 2? 5; 


5.3.7. Приоритет выполнения операторов 


В какой последовательности будет вычисляться приведенное далее выражение? 


$х =5+10*3/2; 
есһо $х; // 20 


Это зависит от приоритета выполнения операторов. В данном случае последова- 
тельность вычисления выражения будет следующей: 


1. Число 10 будет умножено на 3, т. к. приоритет оператора умножения выше при- 
оритета оператора сложения. 


2. Полученное значение будет поделено на 2, поскольку приоритет оператора 
деления равен приоритету оператора умножения (а операторы с равными при- 
оритетами выполняются слева направо), но выше чем у оператора сложения. 
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3. К полученному значению будет прибавлено число 5, т. к. оператор присваива- 
ния = имеет наименьший приоритет. 


4. Значение будет присвоено переменной $x. 
С помощью скобок можно изменить последовательность вычисления выражения: 


Sx = (ЕО) * 32 
есһо $х; [L 22.5 


Теперь порядок вычислений будет другим: 

1. К числу 5 будет прибавлено 10. 

2. Полученное значение будет умножено на 3. 

3. Полученное значение будет поделено на 2. 

4. Значение будет присвоено переменной $x. 

Приведем рассмотренные операторы в порядке убывания приоритета: 
хх — возведение в степень. 

++, ==, ~, (<Тип>) — инкремент, декремент, двоичная инверсия, приведение типов. 
! — логическое отрицание. 

х, /, % — умножение, деление, остаток от деления. 

+, -, . — сложение, вычитание, конкатенация строк. 

<<, >> — ДВОИЧНЫЙ СДВИГ. 


<, <=, >, >---- операторы сравнения. 


, !=, ===, |--, <>, <=> — операторы сравнения. 
& — двоичное M. 
^ — двоичное исключающее или. 
| — двоичное или. 
&& — объединение логических операторов. 
| | — объединение логических операторов. 


2? — проверка переменной на значение null. 


‚+=, --, %-, %%-, /-, %-, &=, |=, ^=, <<= H >> присваивание. 
and — объединение логических операторов. 


xor — объединение логических операторов. 


оо, о%‚,о о, о ооо о ооо ооо5 


ог — объединение логических операторов. 


5.3.8. Преобразование типов данных 


Что получится, если к числу прибавить строку? 


Ѕ5Ер = "5"; // Строка 
$number = 3; // Число 
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$varl = $number + $str; // Переменная содержит число 8 


$var2 $str + $number; // Переменная содержит число 8 


Результат будет абсолютно не таким, как в JavaScript, поскольку оператор + в РНР 
не используется для конкатенации строк. В этом случае интерпретатор попытается 
преобразовать переменные к одному типу данных, а затем выполнить операцию. 
В нашем примере переменная $str, имеющая тип string (строка), будет преобразо- 
вана к типу іле (число), а затем будет выполнено сложение двух чисел. 


Но что произойдет, если строку невозможно преобразовать в число? 


$str = "Привет"; // Строка 
$number = 3; // Число 
$varl = $number + $str; // Переменная содержит число 3 


$var2 = $str + $number; // Переменная содержит число 3 


Как видно из примера. строка, не содержащая числа, преобразуется к числу о. При 
этом будет выведено предупреждающее сообщение о невозможности преобразова- 
НИЯ ТИПОВ: 


Warning: А non-numeric value encountered 


А что будет, если из числа вычесть строку, число умножить на строку или число 
разделить на строку? 


$number = 15; // Число 
$str = "5"; // Строка 
$var1l = $number - $str; // Переменная содержит число 10 


$var2 $number * $str; // Переменная содержит число 75 


$var3 = $number / $str; // Переменная содержит число 3 


Как можно видеть, интерпретатор попытается преобразовать строку в число, а за- 
тем вычислить выражение. В какой последовательности будут указаны число и 
строка, не важно: 


$var4 = $str * $number; // Переменная все равно содержит число 75 


С одной стороны, хорошо, что интерпретатор выполняет преобразование ТИПОВ 
данных за нас. Нос другой стороны, можно получить результат, который вовсе не 
планировался. Поэтому лучше оперировать переменными одного типа, а при необ- 
ходимости преобразования типов делать это самостоятельно: 


$str = "5"; // Строка 
$number = 3; // Число 
5уас1 = $number + intval($str); // Переменная содержит число 8 
$var2 = $number + (int)$str; // Переменная содержит число 8 
var_dump ($var1); // int(8) 
var_dump ($var1); // int (8) 


5.3.9. Оператор ветвления if 


Оператор ветвления уже встречался ранее в наших примерах — в частности, так мы 
определяли факт существования переменной. Так как оператор іѕѕе+ () при суще- 
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ствовании переменной возвращает значение true, то это условие можно проверить, 
используя оператор ветвления 1Ғ...е15е: 


if (isset($_GET['name'])) { 
echo 'Hello, ' . $ СЕТ ["раце']; 


} 

else { 
echo "Введите ваше имя<рү>"; 
echo '<form action="! . $_ЗЕВУЕВ [ '5СВТРТ МАМЕ" | g ар 
echo '<1приЕ type="text" папе-"паше">"; 


echo '<1приЕ type="submit" уа1џце="ОК">'; 
echo '</ЁЕоги>!; 
} 


Обратите внимание, что логическое выражение не содержит операторов сравнения: 
if (isset($_GET['name'])) { 


Такая запись эквивалентна следующей: 


if (isset($_GET['name']) == true) { 
Проверка на равенство выражения значению true выполняется по умолчанию. 


Оператор ветвления 1+. ..е1зе имеет следующий формат: 


if (<Логическое выражение») { 
<Блок, выполняемый, если условие истинно> 


} 


[elseif (<Логическое выражение>) { 


<Блок, выполняемый, если условие истинно> 


[else ( 
<Блок, выполняемый, если все условия ложны> 


Если условие В 1Е истинно, то выполняются инструкции из этого блока, а все 
остальные условия пропускаются. Если условие в if ложно, то проверяется условие 
в первом elseif. Если условие В elseif истинно, то выполняются инструкции из 
ЭТОГО блока, а все остальные условия пропускаются. Если условие в первом elseif 
ложно, то точно так же проверяются остальные условия. Если все условия ложны, 
то выполняется блок else. Блоков elseif может быть несколько с разными логиче- 
скими выражениями, а вот блок else может быть только ОДИН. Блоки elseif И else 
являются необязательными. 


Напишем программу, которая проверяет, является ли введенное пользователем 
число четным или нет (листинг 5.13). После проверки выводится соответствующее 
сообщение. 


Листинг 5.13. Проверка числа на четность 


<р>Проверка числа на четность</р><рг><рг> 
Введите число<рг> 
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<form action="<?=$_SERVER ['СКІРТ МАМЕ '] ?>"> 
<input type="text" паме="уаг"> 


<input type="submit" value="0K"> 
</form><br> 
<?php 
if (isset($_GET['var'])) { 
$var = $_GET['var']; 
if (preg _match('/^[0-9]+$/su', $var)) { 
// Преобразуем тип string (строка) B int (число) 


$var = intval($var, 10); 


if ( ($var 3 2) = 0 ) { 
echo $var . ' — четное число"; 
} 
else { 
echo $var . ' — нечетное число"; 


} 


else echo 'Необходимо ввести число"; 


} 


?> 


Как видно из примера, один условный оператор можно вложить в другой. Кроме 
того, если блок состоит из одного выражения, фигурные скобки можно не указы- 
вать: 


if ( ($var % 2) == ) echo $var . ' — четное число"; 
else echo 5уаг . ' — нечетное число"; 


Блок else может отсутствовать: 
if ( (Ѕуаг % 2) == ) echo $уаг . ' — четное число"; 


Кроме того, оператор 1...е1зе позволяет проверить сразу несколько условий. Pac- 
смотрим это на примере (листинг 5.14). 


Листинг 5.14. Проверка введенного значения 


<р>Какой операционной системой вы пользуетесь?</р><рг><рг> 
<form асііоп="<?=$ ЅЕКҮЕК [' ЅСКІРТ МАМЕ" ] ?>"> 
<select паше="о$"> 


<option уа1џе="0" selected>He выбрано</орііоп> 
<option value="1">Windows ХР</орііоп> 
<option value="2">Windows 7</option> 
<option value="3">Windows 8</option> 
<option value="4">Windows 10</option> 


<option уа1џе="5">Другая</орііоп> 
</select> 

<input type="submit" уа1ае="Выбрал"> 
</form> 
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<?php 
if (isset($_GET['os'])) { 
боз = $ СЕТ['05']; 
ТЕ (боз == "1%) echo "Вы выбрали — Windows ХР"; 
elseif (505 == '2') echo "Вы выбрали — Windows 7'; 
elseif ($05 == '3') echo "Вы выбрали - Windows 8"; 
elseif ($05 == '4') echo "Вы выбрали — Windows 10'; 
elseif (5ов == '5') echo "Вы выбрали - Другая"; 
elseif ($05 == !0") echo "Вы не выбрали операционную систему"; 
еізе есһо "Мы не смогли определить вашу операционную систему"; 


} 


?> 


С помощью оператора elseif мы можем определить выбранное в списке значение 
и вывести соответствующее сообщение. 


Существует также следующий формат оператора ветвления 1ғ...е15е: 


<?php if (<Логическое выражение>): ?> 


<Текст, выводимый, если условие истинно» 


[<?php elseif (<Логическое выражение»): ?> 


<Текст, выводимый, если условие истинно>] 
[<?php else: ?> 

<Текст, выводимый, если все условия ложны>] 
<?php endif; ?> 


Этот формат удобно использовать для вывода НТМГ-кода: 


<?php if (ізѕеї ($ СЕТ[ 'паше'])): ?> 
Hello, <?=$ СЕТ ['паме' ]?> 
<?php else: ?> 


Введите ваше имя<рг> 
<form action="<?=$_SERVER[ ' SCRIPT_NAME ' ] ?>"> 
<input type="text" name="name"> 


<input type="submit" value="0K"> 
</form> 

<?php endif; ?> 

5.3.10. Оператор ?: 


Оператор ?: имеет следуюший формат: 


<Переменная> - (<Логическое выражение>) ? <Выражение если Истина> 
<Выражение если Ложь>; 


Если логическое выражение возвращает значение true, то выполняется выражение, 
расположенное после вопросительного знака. Если логическое выражение возвра- 
шает значение false, то выполняется выражение, расположенное после двоеточия. 
Результат выполнения выражений становится результатом выполнения оператора. 
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Перепишем нашу программу проверки числа на четность (листинг 5.13) и исполь- 
зуем оператор ?: вместо іғ...е1ѕе (листинг 5.15). 


Листинг 5.15. Использование оператора ?: 


<р>Проверка числа на четность</р><рг><рг> 
Введите число<рг> 
<form action="<?=$_SERVER [' SCRIPT_NAME" ] ?>"> 
<input type="text" name="var"> 
<input type="submit" value="0KĶ"> 
</form><br> 
<?php 
if (isset($_GET['var'])) { 

$var = $_GET['var']; 

if (preg_match('/^[0-9]+$/su', $var)) 

// Преобразуем тип string (строка) B int (число) 


-- 


$var = intval($var, 10); 
echo ( (буаг % 2) == 0) ? $var . ' — четное число! 
$var . ' — нечетное число"; 


} 


еізе есһо 'Необходимо ввести число"; 


) 
?> 


Рассмотрим еще один пример. Предположим, необходимо вывести сообщение при 
возникновении определенного условия. Если попробовать вывести его так: 
$var = 5; 


(буас == 5) ? echo 'Равно' : echo "Не равно"; // Ошибка 


то возникнет ошибка, потому что подвыражение должно возврашать какое-либо 
значение, а оператор есһо ничего не возврашает. Обойти эту ошибку можно заме- 
ной оператора echo на print: 


$var = 5; 
($var == 5) ? print "Равно' : print "Не равно"; 
Средний параметр можно не указывать: 


$var = 6; 
($var == 5) ? : print "Не равно"; 


5.3.11. Оператор выбора switch 


Оператор выбора switch имеет следующий формат: 


switch (<Переменная или выражение>) 1 
сазе <Значение 1>: 
<Выражение 1>; 
break; 


Основы РНР. Создаем динамические И/еЬ-страницы 


[ сазе <Значение 2>: 
<Выражение 2>; 
break; 

же 

[ default: 
<Выражение>; | 


} 
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Вместо логического выражения оператор switch принимает переменную или выра- 
жение (вычисляется ТОЛЬКО ОДИН раз). В зависимости от значения выполняется 
ОДИН ИЗ блоков case, В котором указано это значение. Если ни одно из значений не 


описано в блоках case, ТО выполняется блок default (если он указан). 


Перепишем нашу программу определения операционной системы (см. лис- 


тинг 5.14), заменив оператор 1ғ...е1зе На switch (листинг 5.16). 


Листинг 5.16. Использование оператора switch 


<р>Какой операционной системой вы пользуетесь?</р><рг><рг> 


<form action="<?=$_SERVER[ ' SCRIPT_NAME ' ]?>"> 
<select name="os"> 


<option value="0" selected>He выбрано</орііоп> 


<option value="1">Windows XP</option> 
<option value="2">Windows 7</option> 
<option value="3">Windows 8</option> 
<option value="4">Windows 10</option> 
<option уа1ае="5">Другая</орЕ1оп> 
</select> 

<input type="submit" уа1ае="Выбрал"> 
</form> 


<?php 
if (isset($_GET['os'])) { 
switch ($ СЕТ ["о5']) { 
case '1': 
echo "Вы выбрали — Windows ХР"; break; 
case "2": 
echo "Вы выбрали — Windows 7"; break; 
case 13%: 
echo "Вы выбрали — Windows 8"; break; 
case "4"; 
echo "Вы выбрали — Windows 10"; break; 
case '5': 
echo "Вы выбрали — Другая"; break; 
case '0': 
echo "Вы не выбрали операционную систему"; break; 
default: 


echo "Мы не смогли определить вашу операционную систему"; 


?> 
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Как видно из примера, в конце каждого блока case указан оператор break. Этот 
оператор позволяет досрочно выйти из оператора выбора switch. Зачем это нужно? 
Если не указать оператор break в конце блока case, то будет выполняться следую- 
щий блок сазе независимо от указанного значения. В большинстве случаев такая 
ситуация приводит к ошибкам, однако в некоторых случаях это может быть полез- 
ным. Например, можно выполнить одни и те же инструкции при разных значениях, 


разместив инструкции в конце диапазона значений: 


$ch 


swi 


} 


Существует также следующий формат оператора выбора switch: 


<?р 


echo "а, b или с"; 


= 'с'; 

tch (бсһ) { 

case "а": 

case “Ы”: 

case “с”: 
break; 

case "а": 


echo "Только d"; 


case <Значение 1>: 


<?р 
саз 


<?р 
def 


<?р 


Юр break; 
е 


Юр break; 
аці: ?> 


Юр endswitch; 


<Значение 2>: 


?> 


> 


<Текст, выводимый, 


R> 


<Текст, выводимый, 


<Текст, выводимый, 


есл 


есл 


есл 


Юр switch (<Переменная или выражение>): 


и условие истинно> 


и условие истинно> 


и все условия ложны> 


Этот формат удобно использовать для вывода НТМГ-кода: 


<?р 
$ch 
?> 

<?р 
cas 
Зна 
<?р 
саѕ 
Зна 
<?р 
def 
Дру 
<?р 


пр 


е 'а': P> 
чение а 

һр break; 

е 'р': ?> 
чение р 

һр break; 
апт: 22> 

гое значение 


Юр endswitch; 


Һр switch ($сһ) : 


?> 
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5.4. Циклы. 

Многократное выполнение блока кода 

Предположим, нужно вывести все числа от 1 до 100 по одному на строке. Обычным 
способом пришлось бы писать 100 строк кода: 

echo "1<br>\n"; 

echo "2<br>\n"; 

echo "100<br>\n"; 

С помошью циклов то же действие можно выполнить одной строкой кода: 

for ($i = 1; $i < 101; біз) echo $1 . "<br>\n"; 


Иными словами, циклы позволяют выполнить одни и те же инструкции многократно. 


5.4.1. Цикл for 


Цикл for используется для выполнения инструкций определенное число раз. Dop- 
мат оператора: 


for (<Начальное значение>; <Условие>; <Прирашение>) { 
<Инструкции> 
} 


Здесь присутствуют следующие конструкции: 
С <Начальное значение> — присваивает переменной-счетчику начальное значение; 


O <Условие> — содержит логическое выражение. Пока логическое выражение воз- 
вращает значение true, выполняются инструкции внутри цикла. Обратите ВНИ- 
мание: логическое выражение вычисляется на каждой итерации цикла; 


П <Прирацение> — задает изменение переменной-счетчика при каждой итерации. 
Последовательность работы цикла for: 
1. Переменной-счетчику присваивается начальное значение. 


2; Проверяется условие: если оно истинно, выполняются инструкции внутри цик- 
ла, в противном случае выполнение цикла завершается. 


3. Переменная-счетчик изменяется на величину, указанную в <Прирашение>. 
4. Переход к п. 2. 


Цикл выполняется до тех пор, пока <Условие> не вернет false. Если это не случится, 
цикл будет бесконечным. 


<Приращение> Может не только увеличивать значение переменной-счетчика, HO и 
уменьшать. Выведем все числа от 100 до 1: 


Бог (бі = 100; бі > 0; $1--) есһо $1 . "<рг>\п"; 


480 Глава 5 


<Приращение> может изменять значение переменной-счетчика не только на единицу. 
Выведем все четные числа от 1 до 100: 


for ($i = 2; бі < 101; бі += 2) echo $i . "<br>\n"; 
Следует заметить, что выражение, указанное в параметре <Условие>, ВЫчисляется на 
каждой итерации. Рассмотрим вывод элементов массива: 


Ѕагг = аггау(1, 2, 3); 
for (бі = 0; $i < count ($arr); $i++) { 


if ($i == 0) { 
$arr[] = 4; // Добавляем новые элементы 
$arr[] = 5; // для доказательства 


} 
echo $arr[$i] . " "; 
} // Выведет: 12345 


В этом примере мы указываем функцию count () в параметре <Условие>, а внутри 
цикла (чтобы доказать вычисление на каждой итерации) добавляем в массив новые 
элементы. В итоге мы получили все элементы массива, включая новые. Чтобы это- 
го избежать, следует вычисление размера массива указать в первом параметре: 


$arr = аггау(1, 2, 3); 
Бог (бі = 0, $с = сойпЕ(бакк); бі < бс; 5і++) { 


if (бі == 0) 
$arr[] = 4; // Добавляем новые элементы 
$arr[] = 5; // для доказательства 


} 
echo $arr[$i] . " "; 
} // Выведет: 1 2 3 


Все параметры цикла for являются необязательными. Хотя параметры можно не 
указывать, точки с запятой обязательно должны быть. Если все параметры не ука- 
заны, то цикл будет бесконечным. Чтобы выйти из бесконечного цикла, следует 
использовать оператор break: 


$1 = 1; // <Начальное значение> 
for С // Бесконечный цикл 
if ($i <= 10) { // <Условие> 
echo $i, "<br>\n"; 
$1++; // <Приращение> 
} 
else { 
break; // Выходим из цикла 


) 
Существует также следующий формат оператора for: 


<?php for (<Начальное значение>; <Условие>; <Прирашение>): ?> 
<Текст, выводимый указанное количество раз> 
<?php endfor; ?> 
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Пример: 

<?php for ($i = 1; бі < 101; $i++): ?> 
Строка <?=$i?><br> 

<?php endfor; ?> 


5.4.2. Цикл while 


Выполнение инструкций в цикле while продолжается до тех пор, пока логическое 
выражение истинно. Формат оператора: 


<Начальное значение>; 

while (<Условие>) { 
<Инструкции>; 
<Приращение>; 

} 


Последовательность работы цикла while: 
1. Переменной-счетчику присваивается начальное значение. 


2; Проверяется условие: если оно истинно, выполняются инструкции внутри цик- 
ла, иначе выполнение цикла завершается. 


3. Переменная-счетчик изменяется на величину, указанную в <Прирашение>. 
4. Переход к п. 2. 


Выведем все числа от 1 до 100, ИСПОЛЬЗУЯ ЦИКЛ while: 
ЗЕ 
while ($i < 101) { 

echo $i . "<br>\n"; 

Si++; 


ВНИМАНИЕ! 
Если <Приращение> не указано, то цикл будет бесконечным. 


В качестве параметра <Прирашение> не обязательно должна быть арифметическая 
операция. Например, при работе с базами данных в качестве <Приращение> будет 
перемещение к следующей строке, а условием выхода из цикла — последняя стро- 
ка в базе данных. В этом случае <Начальное значение> — получение первой строки 
базы данных. 


Существует также следующий формат оператора while: 


<?php <Начальное значение>; 

while (<Условие>): ?> 

<Текст, выводимый указанное количество раз> 
<?php <Прирашение>; 

endwhile; ?> 
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Пример: 

<?рһр $1 = 1; 

while (бі < 101): ?> 
Строка <?=$i?><br> 
<?php $i++; 
endwhile; ?> 


5.4.3. Цикл do...while 


Инструкции в теле цикла do. ..while выполняются до тех пор, пока логическое вы- 
ражение истинно. Но, в отличие от цикла while, условие проверяется не в начале 
цикла, а в конце. Поэтому инструкции внутри цикла до. ..while выполнятся мини- 
мум один раз. 

Формат оператора ао. ..while: 


<Начальное значение>; 
do { 
<Инструкции>; 
<Приращение>; 
} while (<Условие>); 


Последовательность работы цикла ао. ..while: 

1. Переменной-счетчику присваивается начальное значение. 

2. Выполняются инструкции внутри цикла. 

3. Переменная-счетчик изменяется на величину, указанную В <Прирашение>. 
4 


$ Проверяется условие: если оно истинно, происходит переход к п. 25 а если нет — 

выполнение цикла завершается. 

Выведем все числа от 1 до 100, используя цикл do. ..while: 

За 

do { 
есһо $1 . "<рг>\п"; 
$1++; 

} 

while ($i < 101); 


ВНИМАНИЕ! 
Если <Прирашение> не указано, то цикл будет бесконечным. 


5.4.4. Цикл foreach 


Цикл foreach используется ДЛЯ перебора элементов массива: 


Ѕагг = аггау( Один", 'Два', 'Три', "Четыре"); 
foreach ($arr аз $value) { 
echo $value . "<br>\n"; 
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Перебрать элементы ассоциативного массива можно следующим образом: 


Ѕагг['Один'] = 1; 
Ѕагү['Два'] = 2; 
Ѕагг['Три'] = 3; 
Ѕагг['Четыре!'] = 4; 


foreach ($arr аз $key => $value) { 
cho $key . ' s&gt; ' . $value . "<br>\n"; 


} 


Если параметр в цикле Ғогеасһ не является массивом, интерпретатор выведет со- 
общение об ошибке: 
бату 


foreach ($агг аз $key => $value) { 
cho $key . ' s&gt; ' . $value . "<br>\n"; 


} 


// Ошибка: Warning: Invalid argument supplied for foreach () 


По этой причине перед вызовом цикла foreach необходимо проверить тип пере- 
менной, например, с помощью функции із аггау() ИЛИ 15 1{егаЮ1е(): 


if (isset($arr) && із аггау($агг)) { 
// Проверка существования и типа переменной 
foreach (Ѕагг аз $key => $value) 1 
cho $key . ' s&gt; ' . $value . "<br>\n"; 


} 


С помощью оператора foreach можно перебирать двумерные массивы с распаков- 
кой вложенного массива. В этом случае нужно указать переменные внутри опера- 
тора list(). Через эти переменные будут доступны текущие значения элементов 
массива: 


Ѕагг = | 
[1, 2], 


foreach ($arr аз 115%(5а, $b)) { 
есһо ба. ', '. 5р . "<г>\о"; 
} 


Следует учитывать, что переменная, указанная в параметре оператора foreach, 
внутри тела цикла содержит лишь копию элемента массива. Если попытаться внут- 
ри цикла умножить все элементы массива на 2, то ничего не получится: 


Ѕагг = (|1, 2, 3]; 
foreach (багг аз $value) 1 
$value *= 2; 
} 
ргіпе г($агк); // Array ( [0] => 1 [1] => 2 [2] => 3 ) 
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Чтобы изменить значения элементов массива внутри цикла foreach, нужно перед 
именем переменной указать символ 6. В этом случае будет создаваться ссылка на 
элемент массива. После окончания выполнения цикла нужно обязательно разорвать 
ссылку с последним элементом массива с помощью оператора unset (), иначе MOX- 
но получить неожиданный результат в дальнейшем. Вот пример умножения всех 
элементов массива на 2: 


Ѕагг = [1, 2, 3]; 
foreach ($arr аз &$value) { 
$value *= 2; 
} 
// Разрываем ссылку 
unset ($value); 
print_r($arr); // Array ( [0] => 2 [1] => 4 [2] => 6 


Существуют также следующие форматы оператора foreach: 


<?php foreach (<Массив> аз <Переменная>): ?> 

<Текст, выводимый внутри цикла> 

<?php епаҒогеасһ; ?> 

<?php foreach (<Массив> аз <Ключ> => <Значение>): ?> 


<Текст, выводимый внутри цикла> 
<?php епаҒогеасһ; ?> 


Пример: 

<?рһр 

Ѕагг = (|1, 2, 3]; 
$arr2 = (|1; 

Ѕагг2 ['Один'] = 1; 
$агг2 ['Два'] = 2; 
Ѕагг2 ['Три'] = 3; 
?> 


<?php foreach (багг аз $value): ?> 

Значение <?=$value?><br> 

<?php епаҒогеасһ; ?> 

<?php foreach ($arr2 аз $key => $value): ?> 
Ключ <?=$key?> значение <?=$value?><br> 
<?php endforeach; ?> 


5.4.5. Оператор continue. 

Переход на следующую итерацию цикла 

Оператор continue позволяет перейти к следуюшей итерации цикла до завершения 
выполнения всех инструкций внутри цикла. Формат: 


continue [<Уровень>]; 
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Выведем все числа от 1 до 100, кроме чисел от 5 до 10 включительно: 


Бок ($1 = 1; $1 < 101; $1++) { 
ТЕ ($1 > 4 вв бі < 11) continúe; 
echo $i . "<br>\n"; 


5.4.6. Оператор break. Прерывание цикла 


Оператор break позволяет прервать выполнение цикла досрочно. Формат: 


break [<Уровень>]; 


Для примера выведем все числа от 1 до 100 еще одним способом: 


Бог (бі = 1; ; $4++) f 
if ($i > 100) break; 
echo $i . "<br>\n"; 


} 


Здесь мы оставили условие цикла пустым, и это значит, что цикл будет продол- 
жаться бесконечно. Однако, благодаря наличию оператора break, выполнение цик- 
ла прерывается, как только будет напечатано 100 строк. 


ВНИМАНИЕ! 


Оператор break прерывает выполнение цикла, а не программы, т. е. далее будет Bbl- 
полнена инструкция, следующая сразу за циклом. 


5.4.7. Оператор goto 


С помощью оператора безусловного перехода goto можно передать управление 
в какое-либо место программы. Оператор имеет следующий формат: 


goto <Метка>; 
Значение в параметре <Метка> ДОЛЖНО быть допустимым идентификатором. Место 
в программе, в которое передается управление, помечается одноименной меткой, 


после которой указывается двоеточие. В качестве примера имитируем цикл и выве- 
дем числа от 1 до 100: 


Şi- is 

BLOCK_START: { 
if ($i > 100) goto BLOCK END; 
есһо $1 . "<рг>\п"; 
$i++; 


goto BLOCK START; 
} 
BLOCK END: ; 


Kak видно из примера, фигурные скобки можно использовать не только примени- 
тельно к условным операторам и циклам, но и как отдельную конструкцию. Фраг- 
мент кода, заключенный в фигурные скобки, называется блоком. 
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ПРИМЕЧАНИЕ 


Следует избегать использования оператора goto, Т. к. его применение делает npo- 
грамму слишком запутанной и может привести к неожиданным результатам. 


5.5. Числа 


В языке РНР для хранения чисел предназначены следующие типы данных: 
С int (или integer) — целые числа; 
С float (или double) — вещественные числа. 


Размер int зависит от разрядности операционной системы. При этом в Windows тип 
іпе всегда кодируется 32-мя битами. Получить текущий размер можно с помощью 
константы РНР ТМТ 517 


Е 


var dump (РНР ІМТ 5І2Е); // іп (4) 


Диапазон значений позволяют увидеть константы рРНР_ТМТ МТМ И РНР ІМТ МАХ: 


var dump (РНР ІМТ МТМ); // 120% (-2147483648) 
уаг ар (РНР ІМТ МАХ); // іпё (2147483647) 


Если значение выходит за диапазон допустимых значений ДЛЯ типа int, ТО тип int 
автоматически преобразуется В ТИП float: 


уаг dump (РНР ІМТ МАХ + 1); // float (2147483648) 


Целочисленное значение задается в десятичной, двоичной, восьмеричной или 
шестнадцатеричной форме. Двоичные числа начинаются с комбинации символов Ob 
(или 0B) и могут содержать цифры 0 или 1. Восьмеричные числа начинаются с нуля 
и содержат цифры от 0 до 7. Шестнадцатеричные числа начинаются с комбинации 
символов ох (или ох) и могут содержать цифры от 0 до 9 и буквы от до ғ (регистр 
букв не имеет значения). Двоичные, восьмеричные и шестнадцатеричные значения 
преобразуются в десятичное значение: 


// Двоичное значение 


var dump (0601110111); // int(119) 
// Восьмеричное значени 

уаг _ dump (0167); // іпё (119) 
// Шестнадцатеричное значени 

var dump (0x77); // int(119) 
var dump (ОхЕЕ); // int (255) 
// Десятичное значение 

var dump (119); // int(119) 


Вешественное число может содержать точку и (или) экспоненту, начинаюшуюся 
с буквы Е (регистр не имеет значения): 


уаг аџотр (20.0); // float (20) 
var _ dump (12.1е20); // float (1.21Е+21) 
var отр (.123); // float (0.123) 
уаг аџотр (47.Е-10); // float (4.7Е-9) 
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При выполнении операций над вещественными числами следует учитывать огра- 
ничения точности вычислений. Например, результат следующей инструкции может 
показаться странным: 


мас аџотр (0.3 - 0.1 - 0.1 - 0.1); // float (-2.7755575615629Е-17) 


Ожидаемым был бы результат 0.0, но, как видно из примера, мы получили совсем 
другой результат (-2.7755575615629Е-17). Он очень близок к нулю, но не равен 
нулю. Учитывайте это при указании вещественных чисел в качестве значения счет- 
чика внутри цикла. Попытка проверить значение на равенство может привести 
к бесконечному циклу. 


В логическом контексте число 0 трактуется как Ға15е, тогда как любое другое чис- 
JIO — КАК true: 


var dump( (роо1)0 ); // bool (false) 
var dump( (роо1)1 ); // bool (true) 
var _dump( (bool)-1 ); // bool (true) 
var _dump( (bool)INF ); // bool (true) 
var _dump( (bool)NAN ); // bool (true) 


Если выполнить приведение логических значений к типу int, ТО false будет приве- 
дено к 0, а true — K 1: 


var dump( (int)false ); // int (0) 
мас _dump( (int)true ); // int(1) 


5.5.1. Математические константы 


В языке РНР определены следующие стандартные константы: 


С M PI— содержит число л. Получить значение константы можно также с по- 
мощью функции рі (): 


мас dump( М РТ ); // float (3.1415926535898) 
var dump( р1() ); // float (3.1415926535898) 


o M_E — содержит значение константы е: 


var dump( МЕ); // float (2.718281828459) 


5.5.2. Основные функции для работы с числами 


Приведем основные функции для работы с числами: 


П ав 0-- возвращает абсолютное значение: 
var ашар( abs (-1) ); // int(1) 

П ром (<Число>, <Степень>) — возведение <Число> В <Степень>: 
var аштр( ром (10, 2) ); // іпі (100) 


мас dump( 10 ** 2); // іһЕ(100) 
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O заге() — квадратный корень: 

var dump( загі (100) ); // float (10) 
ехр() — экспонента; 

log () — натуральный логарифм; 


10910 () — десятичный логарифм; 


ооо 


пах (<Список чисел через запятую>) — максимальное значение 


var аштр( шах(10, 3) ); // іпї (10) 


О 


min (<Список чисел через запятую>) — минимальное значение: 


var dump( піп(10, 3) ); // 116 (3) 


5.5.3. Округление чисел 


Для округления чисел предназначены следуюшие функции: 


О сеі1() — возвращает значение, округленное до ближайшего большего значения: 
мас Әшпр( се11 (1.49) ); // float(2) 
var dump( се11 (1.50) ); // Ғ1оа+ (2) 
мас Әшпр( сеі1 (1.51) ); // #1оаї (2) 
O ғ1оог() — возвращает значение, округленное до ближайшего меньшего зна- 
чения: 
мас Әшпр( #1оог (1.49) ); // #1оаї (1) 
мас Әшпр( #1оог (1.50) ); // #1оаё (1) 
мас Әшпр( #1оог (1.51) ); // #1оаё (1) 
O round() — возврашает число, округленное до ближайшего меньшего целого, — 


для чисел с дробной частью, меньшей 0.5, или значение, округленное до 
ближайшего большего целого, — для чисел с дробной частью, большей или рав- 
НОЙ 0.5: 


var dump( гоџпа (1.49) ); // float(1) 
var dump( round(1.50) ); // Ғоағ(2) 
мас Әшпр( кошпа(1.51) ); // Е1оа (2) 


5.5.4. Тригонометрические функции 


В языке РНР доступны следующие основные тригонометрические функции: 


О сіп(), соз(), ғап() — стандартные тригонометрические функции (синус, KOCH- 
нус, тангенс). Значение указывается в радианах: 
var аштр( $11 (4е92каа(90)) ); // float (1) 

О азіп(), асоз (), ағап() — обратные тригонометрические функции (арксинус, арк- 


косинус, арктангенс). Значение возвращается в радианах; 
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o 


var dump ( deg2rad(180) 


o 


var dump ( rad2deg (М РІ) 


); 


); 


аед2гаа() — преобразует градусы в радианы: 
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// float (3.1415926535898) 


rad2deg () — преобразует радианы в градусы: 


// float (180) 


5.5.5. Преобразование строки в число 


Числа, вводимые пользователем, например, в форме, представлены в виде строки. 
Чтобы в дальнейшем использовать эти числа, необходимо выполнить преобразова- 
ние строки в число. Для этого в языке РНР предназначены следующие функции: 


О іпеуа1() — преобразует значение в целое число. Во втором параметре можно 
указать систему счисления. Если преобразовать не удалось, то функция вернет 


число 0. Формат 


intval (mixed $var[, 


Пример: 


// Двоичное значение 


); 


) . 


)% 
); 
); 


var dump( 1п6уа1 ("001110111", 
// Восьмеричное значени 

var dump( іпіуа1 ("0167", 8) 
// Шестнадцатеричное значени 
var dump( іпеуа1("0х77", 16) 
var dump( іпіуа1 ("ОхЕЕ", 16) 
// Десятичное значение 

var dump( іпеуа1("119", 10) 
var dump( іпіуа1 ("строка") 
var dump( іпіуа1 ("строка9") 
var dump( іпеуа1 ("строка") ); 


2) 


, 


r 


int бразе-101) 


); 


int 


// 


// 


// 
// int( 
// 
// 
// 
// 


int 


( 
int ( 
іпі ( 
( 


int 


int (11 


int (11 


іпі (11 


Для десятичных значений достаточно выполнить приведение типов: 


var dump( (int) "119" ); // int(119) 
var dump( (int) "0119" ); // int (119) 
var_dump( (int) "Эстрока" ); // int(9) 
var_dump( (int) "строка9" ); // int (0) 
var dump( (int) "строка" ); // int (0) 
O bindec() — преобразует двоичное значение в десятичное число: 
var dump( bindec ("1110111") ); // int(119) 
О octdec() — преобразует восьмеричное значение в десятичное число: 
маг _ dump( octdec ("167") ); // іп (119) 
С пехаес() — преобразует шестнадцатеричное значение в десятичное число: 
var_dump( hexdec ("77") ); // іһЕ(119) 
var_dump( hexdec ("ЕЕ") ); // int (255) 
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П floatval() — преобразует значение в вещественное число. Если преобразовать 
не удалось, то функция вернет число 0: 
var_dump( floatval ("1,2") ); // Е1оа* (1) 
var_dump( floatval ("1.2") ); // float (1.2) 
var_dump( #1оаёуа1 ("1.2строка") ); // float (1.2) 
var_dump( #1оаёуа1 ("строка1.2") ); // float (0) 
Можно также выполнить приведение типов: 
маг dump( (float) "1,2" ); // Е1оа* (1) 
var dump( (float) "1.2" ); // float (1.2) 
var_dump( (float) "1.2строка" ); // float (1.2) 
var_dump( (float) "строка1.2" ); // float (0) 


5.5.6. Преобразование числа в строку 


Чтобы преобразовать число в строку, достаточно выполнить операцию конкатена- 
ции: 


var dump( 10 ."". 1.2); // string (6) "10 1.2" 
Можно также воспользоваться следующими функциями: 


С number format () — позволяет преобразовать число в отформатированную стро- 
ку. Имеет следующий синтаксис: 


number format (<Число>[, <Число знаков после запятой> [, 


<Десятичный разделитель>, <Разделитель тысяч>11) 


Пример: 

5х - 1234567.126; 

мас Әлпр( number format ($x) ); // string(9) "1,234,567" 
var_dump( number format ($x, 2) ); // string(12) "1,234,567.13" 


var _dump( number format ($x, 2, ",!, |" 5) ); 
// вегіп4(12) "1 234 567,13" 


П sprintf() — позволяет преобразовать число в отформатированную строку. 
Формат функции: 
sprintf (string $format, mixed $args=null, mixed $ -па11) : string 
B параметре $format указывается строка специального формата, внутри которой 
с помощью спецификаторов задаются правила форматирования. Какие специфи- 


каторы используются, мы рассмотрим немного позже при изучении форматиро- 
вания строк. В параметре $args через запятую указываются различные значения: 


var dump( өргіпһеғ("Фа", 10) ); // string(2) "10" 
var аштр( sprintf ("sf", 1.126) ); // вігіпа (8) "1.126000" 
var аштр( sprintf ("%.2f", 1.126) ); // string(4) "1.13" 


Формат десятичного разделителя зависит от настроек локали: 


setlocale (LC ALL, 'Russian Russia'); // Настройка локали 
var_dump( sprintf ("%.2Е", 1.126) ); // string(4) "1,13" 
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С помощью функции sprintf () можно также преобразовать десятичное число 
в двоичное, восьмеричное или шестнадцатеричное значение: 


// Двоичное значение 


уаг дӘшпр( эргіпё# ("%р", 119) ); // string(7) "1110111" 
// Восьмеричное значени 
var dump( вргіпеЕ("%о", 119) ); // string(3) "167" 
// Шестнадцатеричное значени 
var Әшпр( өргіпеЕ("%х", 119) ); // string(2) "77" 
уаг Әшпр( өргіпеЕ("%Х", 255) ); // string(2) "ЕЕ" 
o Базе сопуегї () -- позволяет преобразовать число, записанное в ОДНОЙ системе 


счисления, в другую. Имеет следующий формат: 


Базе сопуегї (<Содержащая число строках, 
<Исходная система счисления>, <Нужная система счисления>) 


Пример: 
var Члтр( Базе сопуег® (9, 10, 2) ); // вегіпа(4) "1001" 
var_dump( Базе сопуегё ("А", 16, 10) ); // string(2) "10" 
О decbin() — преобразует десятичное число в двоичное: 
var dump( decbin (119) ); // зЕх1ра (7) "1110111" 
O decoct () — преобразует десятичное число в восьмеричное; 
мас @лтр( decoct (119) ); // ѕЕгіпа (3) "167" 
П аесһех () — преобразует десятичное число в шестнадцатеричное: 
хаг dump( аесһех (119) ); // string(2) "77" 


5.5.7. Генерация псевдослучайных чисел 


Для генерации псевдослучайных чисел предназначены следующие функции: 


О ше гапа ( [<Начало диапазона>, <Конец диапазона>]) --- генерирует случайное 
ЧИСЛО ОТ <Начало диапазона> ДО <Конец диапазона> включительно: 


echo mt_rand(10, 100); 
Если параметры не указаны, то возврашает значение от 0 до значения функции 
ше декекапатах(): 
echo пе гапа() . "Аа"; 
echo тё декгапдтах(); // 2147483647 

О random іпе(<Начало диапазона>, <Конец диапазона>) — генерирует случайное 
целое число от <Начало диапазона> ДО <Конец диапазона> включительно: 
echo random іпе(10, 100); 

o mt_srand() — настраивает генератор случайных чисел на новую последователь- 
ность. Формат функции: 


те вгапа((іпе $seed[, int $mode = МТ КАМЮ МТ19937]]) : void 
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Значением параметра $5ееа часто служит результат выполнения функции time (), 
которая возвращает число секунд, прошедшее с | января 1970 года. В параметре 
ӛшоде можно указать константы мт ҚАМ) МТ19937 или МТ БАМр РНР. Пример: 


mt_srand(time()); 
echo mt_rand(10, 100); 


Для примера создадим генератор паролей произвольной длины (листинг 5.17). Для 
этого добавляем в массив $arr все разрешенные символы, а далее в цикле получаем 
содержимое массива по случайному индексу. По умолчанию будет выдаваться 
пароль из восьми символов. 


Листинг 5.17. Генератор паролей 


<?php 

function passwGenerator (int $length = 8) : string { 
if ($length < 1) return ''; 
багг = 


аттаустала Dur elp drp tet Е ТОТ N ЕТУ Ы; 
тағатты ло” PAra ВИ у М R N p og 
ОТ E OVA а ПОТ 
О а IRT сағана ааг 
о, A a A 


$password = ''; 

$max = count ($arr) - 1; 

for ($i = 0; $i < $length; $i++) { 
$password .= $arr[ mt_rand(0, $max) ]; 


} 


return браззмога; 
} 
echo passwGenerator (10); // Выведет что-то вроде 7JvlWwoz3u 


5.5.8. Бесконечность и значение МаМ 


Деление вещественного числа на 0.0 приведет к значению плюс или минус INF 
(бесконечность), а деление вещественного числа 0.0 на 0.0 — к значению Мам (нет 
числа). При этом выводятся предупреждающие сообщения о делении на 0: 


var Яшр( 10.0 / 0); // Е1оаЕ (1МЕ) + Warning: Division Бу zero 
var дӘшр( -10.0 / 0); // Е1оаЕ (-ТМЕ) + Warning: Division Бу zero 
var dump( 0.0/0); // float (МАМ) + Warning: Division by zero 


Для проверки соответствия этим значениям следует воспользоваться следуюшими 
функциями: 


п із іпҒіпісе() — возвращает true, если значение равно плюс или минус беско- 
нечность, И Еа1зе — в противном случае; 


п із Ғіпібе() — возвращает true, если значение не равно плюс или минус беско- 
нечность или значению NaN, и false — в противном случае; 
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О і5 пап() — возвращает true, если значение равно NaN, и false — в противном 

случае: 

@$х = 10.0 / 0; 

85у = 0.0 / 0; 

$z = 5; 

var dump ( is_infinite ($x) ); // bool (true) 

var dump( is_infinite ($y) ); // bool(false) 

var dump( is_infinite($z) ); // bool(false) 

var dump( is_nan ($x) ); // bool (false) 

var dump ( is_nan($y) ); // bool (true) 

var dump( 1$ пап(52) ); // bool (false) 

var dump( is_finite ($x) ); // bool (false) 

var dump( is_finite ($y) ); // bool (false) 

var dump( is_finite($z) ); // bool (true) 


5.6. Массивы 


Maccue — это нумерованный или именованный набор переменных. Переменная 
В массиве называется элементом массива, а ее позиция в массиве задается индек- 
сом, или ключом. Нумерация элементов массива по умолчанию начинается с нуля, 
а не с единицы. Это следует помнить. Общее число элементов в массиве называется 
размером массива. Массивы, ключами которых являются числа, часто называют 
списками, а массивы, ключами которых являются строки, — ассоциативными мас- 


сивами. 


В языке РНР граница между списками и ассоциативными массивами является 
условной, т. к. в качестве ключа можно указать и целое число, и строку, причем 
в одном и том же массиве. 


5.6.1. Инициализация массива 


Массив инициализируют тремя способами: 


ПІ поэлементно: 


Ѕагг = агкау(); 


$arr 


$arr 


[0] 
[1] 
$arr[2] 
[3] 


$arr 


"Ноль"; 
"Один"; 


"Два"; 
"Три"; 


Кроме того, можно не указывать индекс. РНР автоматически присвоит элементу 
индекс, на единицу больший последнего, т. е. добавит элемент в конец массива: 


багк = []; 


sanr i = "Ноль"; 
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$arr[] = "Один"; 
багг[] = "Два"; 
Şarr[] = "Три"; 


8 указав все элементы массива сразу с помощью оператора array (): 


Ѕагг = аггау('Ноль', 
Ѕагг2 = аггау ( 

0 => "Ноль", 

1 => "Один", 


2 => "Два", 
3 => "Три" 
); 


П указав все элементы массива сразу внутри квадратных скобок: 


$arr = ['Ноль', "Д 


багү2 = | 


0 -> "Ноль", 
1 => "Один", 


2 => 'Два', 
3 => "Три" 
]; 


"Один", 


"Один", 'Д 


ва", 


ва", 'Три'); 


'Три']; 


Глава 5 


Индексы массивов в РНР на самом деле являются ключами ассоциативных масси- 
вов, Поэтому возможна нумерация с любого значения (по умолчанию с нуля), 


а также прерывание порядка следования индексов внутри массива: 


$arr = аггау ( 
3 => "Ноль", 


"Один", 
8 => "Два", 
"Три" 


); 
ргіпе к( багк ); 


/* 


Array 

( 
ІЗІ => Ноль 
[4] => Один 
[8] => Два 
[9] => Три 

А 


С помощью функции array раа () можно дополнить размер массива до указанной 
во втором параметре величины и присвоить новым элементам значение, заданное 


в третьем параметре. Создадим пять элементов со значениями 0: 


Ѕагг = (|1; 


багү2 = array раа (агг, 5, 0); 


ргіпі к(багг2); 


// Array ( [0] => 0 
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5.6.2. Получение и изменение элемента массива 


Обращение к элементам массива осуществляется с помощью квадратных или 
фигурных скобок, в которых указывается индекс элемента. Нумерация элементов 
массива по умолчанию начинается с нуля: 


$arr аггау ("Ноль', "Один", "Два", 'Три'); 
р 


буаг $arr[1]; // Переменной 5уаг будет присвоено значение "Один" 


$var2 = $агг{2}; // Переменной $уаг2 будет присвоено значение "Два 


Если элемент с указанным индексом не существует, то будет возвращено значение 
null. При этом выводится предупреждающее сообщение Notice: Undefined offset: 


Ѕагг = аггау('Ноль', "Один", "Два", 'Три'); 
$var = $arr[4]; // Ошибка 
$var = $агг[4] ?? "Значение по умолчанию"; // ОК 


Обратиться к элементам массива можно с помощью инструкции list (): 


$arr = ['Ноль', "Один", "Два", "'Три']; 
115% ($уаг1, 5уауү2, $var3, $var4) = Ѕагг; 
echo $уаг2; // Переменной $уаг2 будет присвоено значение "Один" 


Вместо инструкции list () допускается указание переменных через запятую внутри 
квадратных скобок: 


$arr = ['Ноль', "'Один']; 
[$varl, $var2] = $arr; 
echo $уаг1 . ' ' . $var2; // Ноль Один 


При желании можно добавить новый элемент массива или изменить значение 
существующего: 


$arr[ 


] = "Четыре"; 
$arr[0] = 'Нуль'; 


5.6.3. Определение числа элементов массива 


Получить число элементов массива позволяют функции count () И sizeof (): 


Ѕагг = аггау("Ноль", 'Один', 'Два'); 
echo count (баск); // Выведет: 3 
echo sizeof ($агг); // Выведет: 3 


Следует учитывать, что функция count () возвращает число существующих элемен- 
тов массива. Если элемент не определен, то он не учитывается в подсчете. Об этой 
особенности важно помнить при переборе элементов с помощью цикла for. Напри- 
мер, в следующем примере элементы с индексами 0, 1, 2 H 5 не учитываются, т. к. 
нумерация начинается с индекса 3, а элемента с индексом 5 нет: 

Ѕагг = аггау(3 => "а", "Ы", 6 => 'с'); 

echo count ($arr); // Выведет: 3 

ргіпе г( $arr ); // Акгау ( [3] => а [4] => Ь [6] => с) 
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5.6.4. Ассоциативные массивы 


Основное отличие ассоциативных массивов от списков -- возможность обращения 
к элементу массива не по числовому индексу, а по индексу, представляющему 
собой строку. Индексы ассоциативного массива называются ключами. Вот пример 
ассоциативного массива: 


Ѕагг = аггау(); 


Ѕагү['Один'] = 1; 
Ѕагг['Два'] = 2; 
Ѕагг['Три'] = 3; 
echo Ҙагг['Один']; // 1 
echo $агг{'Два'}; // 2 


Кроме перечисления, для инициализации ассоциативных массивов используются 
инструкция array () и квадратные скобки: 


Ѕагг = аггау('Один' => 1, "Два"! => 2, "Три" => 3); 
echo $агх['Один']; // 1 

Ѕагг2 = [ "Один! => 1, "Два! => 2, "Три!" => 3 ]; 
echo $arr2['Tpu']; // 3 


Для доступа к значению после имени переменной указываются квадратные или 
фигурные скобки, внутри которых задается ключ. Если указанный ключ не содер- 
жится в массиве, то будет возвращено значение null и выведено предупреждающее 
сообщение: 


$arr = аггау('Кеу1' => 1, 'Кеу2' => 2, 'key3' => "2"); 
var dump ($arr['key1']); // 10 (1) 

var dump ($arr['key5']); // NULL 

// Notice: Undefined index: key5 


Проверить существование элемента в массиве позволяет оператор isset (): 


$arr = аггау('Кеу1' => 1, 'Кеу2' => 2, 'key3' => "2"); 
if (isset ($arr['key5'])) $var = $arr['key5']; 
lse $var = "Значение по умолчанию"; 


var _ dump ($var); // string(40) "Значение по умолчанию" 


С помощью оператора ?? такую проверку можно упростить: 


$arr = аггау('Кеу1' => 1, 'Кеу2' => 2, 'key3' => "2"); 
$var = $arr['key5'] ?? "Значение по умолчанию"; 


уаг дӘшпр(буас); // string(40) "Значение по умолчанию" 


Обратите внимание: если ключ сушествует, а элемент имеет значение null, ТО 
оператор іззек() вернет значение false. Чтобы проверить наличие ключа, в этом 
случае следует использовать функцию array key exists (): 

$arr = аггау('Кеу1' => null); 

var аштр( isset ($arr['key1']) ); // bool (false) 

var dump ( array Кеу ехізез("Кеуі", $arr) ); // bool (true) 


Основы РНР. Создаем динамические И/еЬ-страницы 497 


Функции array кеуѕ () И array values () позволяют получить все ключи и все 3Ha- 
чения массива соответственно: 


Ѕагг = аггкау('Один' => 1, "Два"! => 2, "Три" => 3); 
ргіпі г( array_keys ($агг) ); 

// Array ( [0] => Один [1] => Два [2] => Три ) 
ргіпе к( аггау уа1аез ($агк) ); 

// Array ( [0] => 1 [1] => 2 [2] => 3 ) 

$arr2 = ['Ноль', 'Один', "'Два!]; 


ргіпе г( array_keys ($arr2) ); 

// Array ( [0] => 0 [1] => 1 [2] => 2 ) 
ргіпе к( аггау уа1аез ($агг2) ); 

// Array ( [0] => Ноль [1] => Один [2] => Два ) 


Функция аггау Кеуз() имеет два дополнительных параметра: 


array_keys (array $аггау[, mixed $ѕеагсһ value=null[, 
bool $strict=false]]) : array 


Если в параметре $search value указано значение, то будут возврашены только 
ключи, содержащие это значение. Обратите внимание: поиск выполняется по зна- 
чениям массива, а не по именам ключей. Если в параметре $strict указано значе- 
ние true, то при сравнении будет использоваться оператор строго равно (===). По 
умолчанию параметр $strict имеет значение false: 


$arr = аггау('Кеу 1' => 1, "Кеу 2' => 2, "Кеу 3' => "2"); 
ргіпе к( аггау Кеуз($агг, 2, false) ); 

// Array ( [0] => key 2 [1] => key 3 ) 

ргіпе к( array_keys ($arr, 2, true) ); 

// Array ( [0] => key 2) 


5.6.5. Многомерные массивы 


Любому элементу массива можно присвоить другой массив: 


Ѕагг = аггау(); 
Ѕагг[0] = аггау(1, 2, 3, 4); 
$arr[1] = [ 5, 6, 7, 8 |; 


В этом случае получить значение массива можно, указав два индекса: 


$var = $агк[0] [2]; // Переменной $уаг будет присвоено значение 3 
$var2 = Ѕагг [1] [0]; // Переменной $уаг2 будет присвоено значение 5 


Создать многомерный ассоциативный массив можно так: 


Ѕагг = аггау(); 
Ѕагг['Иванов'] = array ("Имя' => "Иван", "Отчество! => "Иванович", 
"Год рождения" => 1966); 
Ѕагг['Семенов'] = | "Имя!" => 'Сергей', "Отчество! => "Николаевич", 
"Год рождения! => 1980 1; 
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Сушествует и другие способы: 


$arr = аггау ( 
"Иванов! => агкау('Имя' => "Иван", "Отчество! => "Иванович", 
'Год рождения' => 1966), 
"Семенов! => аггау ("Имя' => "Сергей", "Отчество! => "Николаевич", 
'Год рождения' => 1980) 
); 


багү2 = | 
"Иванов!" => | "Имя" => "Иван", "Отчество! => "Иванович", 
"Год рождения" => 1966 1, 
"Семенов"! => | "Имя" => "Сергей", "Отчество! => "Николаевич", 


"Год рождения" => 1980 1 
1; 


Доступ к элементу такого массива осуществляется путем указания двух ключей: 


echo $агг['Иванов'] ['Год рождения']; // 1966 
echo Ѕагг2 [ 'Семенов'] ['Отчество']; // Николаевич 


Язык РНР допускает смешивание целочисленных индексов и ключей в виде строки 
в одном массиве. Однако на практике подобных смешиваний лучше избегать — 
выберите ЧТО-ТО ОДНО: ИЛИ СПИСОК, ИЛИ ассоциативный массив. Кроме того, количе- 
ство элементов во вложенном массиве может быть произвольным, что позволяет 
создавать так называемые «зубчатые» многомерные массивы: 


Ѕагг = | 
"Иванов!" => | "Имя"! => "Иван", "Отчество! => "Иванович", 
"Год рождения" => 1966 1, 
2 => [ "Фамилия! => "Семенов", "Имя" => "Сергей", 
"Отчество! => "Николаевич", "Год рождения! => 1980 ] 
1; 
echo $агг['Иванов'] ['Год рождения']; // 1966 
echo $агг[2] ["Фамилия']; // Семенов 


5.6.6. Создание копии массива 


Для создания копии массива достаточно присвоить его другой переменной: 


Ѕагг = аггау(1, 2); 
$arr[] = аггау(3, 4); 
багү2 = $arr; 

$агг2 [0] = 22; 

$агг2 [2] [0] = 88; 
ргіпе к($аге 


); 
// Array ( [0] => 1 [1] => 2 [2] => Array ( [0] => 3 [1] => 4 ) ) 
ргіпе к($агг2); 
// Array ( [0] => 22 [1] => 2 [2] => Array ( [0] => 88 [1] => 4) ) 


Если нужно, чтобы через другую переменную можно было изменять массив, то 
следует выполнить присваивание по ссылке: 
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$arr = аггау(1, 2); 

$arr2 = &$arr; // Присваивание по ссылке 

$агг2 [0] = 22; 

ргіпе г($агг); // Array ( [0] => 22 [1] => 2 ) 
ргіпе к($агг2); // Array ( [0] => 22 [1] => 2 


5.6.7. Слияние массивов 


Для слияния двух ассоциативных массивов предусмотрен оператор -: 


батгі = аггау("Один' => 1, "Два" => 2); 
$arr2 = аггау('Три' => 3, "Четыре" => 4); 
$arr3 = $arrl + $arr2; 


print к( $arr3-); 
// Array ( [Один] => 1 [Два] => 2 [Три] => 3 [Четыре] => 4 ) 


Для слияния двух списков оператор + не подходит. В этом случае используется 
функция array merge (): 


Ѕаггі = аггау ("Один', "Два"); 

Ѕагг2 = аггау('Три', 'Четыре'); 

Şarr3 = агкау пегде(багк1, $агг2); 

ргіпе к( $arr3 ); 

// Аккау ( [0] => Один [1] => Два [2] => Три [3] => Четыре ) 


ВНИМАНИЕ! 


Если один из параметров в функции array пегде() не является массивом, интерпрета- 
тор выведет сообщение об ошибке. 


Объединить два массива в ассоциативный массив позволяет функция 
аггау сопріпе (). Элементы массива, указанного в параметре $кеуз, станут ключами, 
а элементы массива, указанного в параметре $values, — значениями. Формат функ- 
ЦИИ: 


аггау сопріпе (array $Кеуз, array буаіпез) : array 


Пример: 


5Кеуз = аггау ("Один', "Два"); 

$values = аггау (1, 2); 

Ѕагг = аггау сопріпе ($кеуѕ, $уа1џеѕ); 
ргіпе к( багк ); 

// Array ( [Один] => 1 [Два] => 2 ) 


Функция аггау Ғі11 Кеуз() позволяет создать ассоциативный массив с ключами из 
списка и присвоить всем элементам указанное значение: 


$keys = аггау ("Один', "Два"); 

Ѕагг = array Ғ111 Кеуѕ ($keys, 0); 
ргіпе к( багк ); 

// Array ( [Один] => 0 [Два] => 0 ) 
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5.6.8. Перебор элементов массива 


Для перебора массивов лучше всего подходит ЦИКЛ foreach, ХОТЯ МОЖНО ВОСПОЛЬЗО- 
ваться и ЦИКЛОМ for, И ЦИКЛОМ while. 


Цикл foreach 
Цикл Ғогеасһ Позволяет работать как со списками: 


$arr = аггау(1, 2, 3, 4); 

foreach ($arr аз $value) { 
echo $value . ' '}; 

} //1234 

echo "<br>\n"; 

foreach ($arr as $index => $value) { 
echo $index . '=&gt;' . $value . ' '; 

} // 0=>1 1->2 2->3 3=>4 


так и с ассоциативными массивами: 


Ѕагг = аггкау('Один' => 1, "Два"! => 2, "Три" => 3); 
foreach ($arr аз $value) { 
echo $value . ' '; 
р 72033 
echo "<br>\n"; 
foreach ($arr as $key => $value) { 
echo $key . 'sĮ&gt;' . $value . ' '}; 
} // Один=>1 Два->2 Три->3 


Для перебора многомерного массива один цикл foreach вкладывают в другой: 


foreach ($arr аз $v) { 
foreach ($v as $i) { 
echo $i . " "; 
} 
echo "; "; 
J AA 23 Aa GT 282% 


C помошью оператора foreach можно перебирать двумерные массивы с распаков- 
кой вложенного массива. В этом случае нужно указать переменные внутри опера- 
тора 115% () или внутри квадратных скобок. Через эти переменные будут доступны 
текущие значения элементов массива: 


Ѕагг = | 
[1,2], 
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foreach ($агг аз 11$ (ба, $5)) { 

// foreach (Ѕагг аз [$а, $Ъ]) { 
сво бала ор тат 

} // 1,2; 3,4; 


Следует учитывать, что переменная, указанная в параметре оператора foreach, CoO- 
держит лишь копию элемента массива. Если попытаться внутри цикла умножить 
все элементы массива на 2, то ничего не получится: 


Ѕагг = [1, 2, 3]; 
foreach ($arr аз $value) { 
$value *= 2; 
} 
print_r($arr); // Array ( [0] => 1 [1] => 2 [2] => 3 ) 


Чтобы изменить значения элементов массива внутри цикла foreach, нужно перед 
именем переменной указать символ 6. В этом случае будет создаваться ссылка на 
элемент массива. После окончания выполнения цикла надо обязательно разорвать 
ссылку с последним элементом массива с помощью оператора unset (), иначе MOX- 
но получить неожиданный результат в дальнейшем. Вот пример умножения всех 
элементов массива на 2: 


Ѕагг = [1, 2, 3]; 
foreach (багг аз &$уа1ае) { 
$value *= 2; 
} 
// Разрываем ссылку 
unset ($value); 
print_r($arr); // Array ( [0] => 2 [1] => 4 [2] => 6 
Можно также поступить следующим образом: 
Ѕагг = [1, 2, 3]; 
foreach (багг аз біпдех => $value) { 
$arr[$index] *= 2; 


} 
ргіпе к(багк); // Array ( [0] => 2 [1] => 4 [2] => 6 


Цикл for 


Цикл for используется, например, так: 


$arr = [1, 2, 31; 

for (бі = 0, $c = count ($агк); бі < $c; $i++) { 
echo $агк[$1] .!'!; 

КУ» 12.3 


Следует с осторожностью пользоваться циклом for, T. K. функция count () возвра- 
щает число существующих элементов массива. Если элемент не определен, то он 
не учитывается в подсчете. Например, следующий код выведет не все элементы 
массива: 
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<?php 
// Отключаем вывод предупреждающих сообщений 


error герогііпо (Е АШ. & ~E NOTICE); 


$arr = [1 => 1, 2, 3]; // Нумерация с единицы 

echo count ($arr); // 3 

echo "<br>\n"; 

for (бі = 0, $c = count ($arr); $1 < $c; $i++) { 
echo $arr[$i] .!; "; 

р 22% 


Как видно из примера, мы не получили значение элемента с индексом 3, заТО ПОПЫ- 
тались получить значение несушествуюшего элемента с индексом 0. Если восполь- 
зуемся в этом случае циклом foreach, ТО проблем не возникнет: 

Ѕагг = [1 => 1, 2, 3]; // Нумерация с единицы 

foreach ($arr аз $value) { 


echo $value . !; е; 
рУ 1; 9% 3; 


Для перебора ассоциативного массива применяются следующие конструкции: 


Ѕагг = | "Один! => 1, "Два! => 2, "Три!" => 3 |1; 
for (reset($arr); ($key = Кеу(багг)) !== null; next ($arr)) { 
echo $key . '=&gt;' . $arr[$key] . ' '"; 


} // Один=>1 Два->2 Три->3 


В этом случае мы воспользовались следующими функциями: 


O reset() — устанавливает указатель на первый элемент массива и возвращает его 
значение или значение false, если массив пуст; 


О next() — перемещает указатель на один элемент вперед и возвращает значение 
элемента или значение false, если достигнут конец массива; 


O key() — возврашает ключ текушего элемента массива или значение null. 


Для перебора элементов ассоциативного массива в обратном порядке предназначе- 

ны другие функции: 

С епа() — устанавливает указатель на последний элемент массива и возвращает 
его значение или значение false, если массив пуст; 


О prev() — перемещает указатель на один элемент массива назад и возвращает 
значение элемента или значение Ға15е, если достигнуто начало массива. 


Кроме того, для получения текущего значения элемента массива можно использо- 
вать функцию current (). Если массив пустой, функция возвращает значение false: 


Ѕагг = | "Один! => 1, "Два"! => 2, "Три!" => 3 1; 
for (ера($агг); ($key = Кеу($агг)) !-- null; ргеу(багг)) 1 
echo $key . '=&91;' . current ($arr) . ' е; 


} // Три->3 Два->2 Один->1 


Основы РНР. Создаем динамические И/еЬ-страницы 503 


Цикл while 
Цикл while также подходит ДЛЯ работы с массивами: 
Ѕагг = | "Один! => 1, "Два"! => 2, "Три"! => 3 1; 
reset ($arr); 
while ( ($key = key($arr)) !== null ) { 

echo $key . '=&gt;' . current ($arr) . ' е; 


next ($arr); 
} // Один=>1 Два->2 Три->3 


Перебор элементов массива без использования циклов 


До сих пор мы выводили содержимое массивов с помощью циклов. Того же эффек- 
та можно достичь при использовании функции array ка1к (). Она позволяет после- 
довательно применять созданную нами функцию ко всем элементам массива. Фор- 
мат функции: 


array_walk (array &$Фаггау, callable $callback[, 
mixed $userdata=null]) : bool 


В первом параметре указывается ссылка на массив, а во втором — название функ- 
ции обратного вызова в виде строки (без круглых скобок) или анонимная функция. 
Через первый параметр функции обратного вызова будет доступно значение эле- 
мента массива, через второй — ключ, а через третий — пользовательские данные, 
которые переданы в параметре $userdata. 


Например, вывод всех элементов массива будет выглядеть так: 


<?php 
function print _array ($value, $key) { 
echo $key . "-баб;! . $value . ' '}; 
} 
Ѕагг = | "Один! => 1, "Два"! => 2, "Три! => 3 ]; 


аггау ма1К($агхг, 'print аггау'); 
// Один=>1 Два->2 Три->3 
// С использованием анонимной функции 


аггау ма1к(Загк, function ($value, $key, Зизекдаға) { 
echo $key . '=&gt;' . $value . $userdata; 

h u 9; 

// Один->1; Два->2; Три->3; 


Чтобы иметь возможность изменить текушее значение элемента массива, необхо- 
димо передать в функцию ссылку на него. Это делается путем указания символа в 
перед именем переменной в описании функции. Можно также обратиться к мас- 
сиву напрямую, предварительно указав инструкцию global. Например, прибавим 
число 10 двумя способами: 

<?рһр 

function сһапде аггау(&$уа1ае, $key, 5чаг) 1 
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// Передача значения по ссылке 
$value += $var; 


Ѕагг = | "Один! => 1, "Два"! => 2, "Три!" => 3 ]; 
// Изменение значений 
аггау ма1К($агхг, "сһапде аггау", 10); 
аггау ма1К($агхг, function ($value, $key, 5чаг) 1 
// Доступ к массиву внутри функции 
global $arr; 
$arr[$key] += $var; 
}, 10); 
ргіпе к(багк); // Array ( [Один] => 21 [Два] => 22 [Три] => 23 ) 


Переменная $var получит значение, указанное в третьем параметре функции 


аттау ма1К(). 


5.6.9. Добавление и удаление элементов массива 
Для добавления и удаления элементов массива предусмотрены следуюшие функ- 
ЦИИ: 

п array_unshift (<Массив>, <Элементы>) -- добавляет элементы в начало массива: 


багг = | 3, 4 ]; 
array_unshift ($arr, 1, 2); 
ргіпе г($агг); // Array ( [0] => 1 [1] => 2 [2] => 3 [3] ->4) 


С конструкция <массив> [] — добавляет элементы в конец массива: 
Закк = | 1, 2 |; 
Ѕагг[] = 3; 
$arr[] = 4; 


ргіпе г($агг); // Array ( [0] => 1 [1] => 2 [2] => 3 [3] => 4 ) 
п аттау разһ (<Массив>, <Элементы>) -- добавляет элементы в конец массива: 


$arr = [ 1, 21; 
array_push ($arr, 3, 4); 
print_r($arr); // Array ( [0] => 1 [1] => 2 [2] => 3 [3] => 4 ) 


o array_shift (<Массив>) — удаляет первый элемент массива и возвращает его (или 


значение null, если элементов больше нет): 


Ѕагг = | 1, 2, 3,41; 
ргіпе г( array_shift($arr) ); // 1 
ргіпе г($агг); // Array ( [0] => 2 [1] => 3 [2] => 4 ) 


П array рор (<Массив>) — удаляет последний элемент массива и возвращает его 


(или значение null, если элементов больше нет): 


Sarr = [ 1, 2, 3, 4 ]; 
ргіпе г( аггау рор($агг) ); // 4 
ргіпе г($агк); // Array ( [0] => 1 [1] => 2 [2] => 3 ) 
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Удалить произвольный элемент массива позволяет оператор unset(). Обратите 
внимание: в этом случае оставшиеся элементы списка не изменяют своих позиций. 
Чтобы переиндексировать список, нужно вызвать функцию array values (): 


Ѕагг = [ 1, 2, 3, 4 1; 

unset (Ѕагг[1]); 

ргіпе г(багг); // Array ( [0] => 1 [2] => 3 [3] => 4) 
Ѕагг = аггау чаічез(багк); 

ргіпе с(багг); // Array ( [0] => 1 [1] => 3 [2] => 4 ) 


ПРИМЕЧАНИЕ 


С помощью рассмотренных в этом разделе функций можно реализовать такие струк- 
туры данных, как очередь и стек (очередь, в которой последний пришедший уходит 
первым). 


5.6.10. Переворачивание и перемешивание массива 


Функция аггау геуегѕе () возвращает массив, элементы которого следуют в обрат- 
ном порядке относительно исходного массива: 


Ѕагг = аггау('Один', 'Два', 'Три', "Четыре"); 

Ѕагг = аггау геуегѕе ($агг); 

ргіпе к(багк); 

// Array ( [0] => Четыре [1] => Три [2] => Два [3] => Один ) 


Функция зһиғғ1е () «перемешивает» массив — элементы массива будут расположе- 
НЫ В случайном порядке: 


Ѕагг = аггкау('Один', "Два", 'Три', "Четыре"); 
shuffle ($arr 


); 
ргіпе к(багк) 
// Аккау ( [0 


] => Два [1] => Один [2] => Три [3] => Четыре ) 


5.6.11. Сортировка массива 


Функция sort () позволяет отсортировать список в алфавитном порядке, а функция 
rsort () — в обратном: 


Ѕагг = аггкау('Один', "Два", 'Три', "Четыре"); 

sort (багг); 

ргіпе к(багк); 

// Array ( [0] => Два [1] => Один [2] => Три [3] => Четыре ) 
rsort ($агг); 


ргіпе к($агг); 
// Array ( [0] => Четыре [1] => Три [2] => Один ІЗІ => Два ) 


Для сортировки ассоциативных массивов эти функции не применяются, т. к. они 
разрывают связь ключа со значением. Отсортировать ассоциативный массив можно 
или по ключам, или по значениям. 
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Для этого используются следующие функции: 
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О asort() — сортировка по значениям в алфавитном порядке; 


О arsort() — сортировка по значениям в обратном порядке: 


Ѕагг = аггау( Один" => 1, 


агзог® ($агг, ЗОВТ МОМЕВТС); 


ргіпе к(багк); 


// Array ( [Три] => 3 [Два] 


"Три! => 3); 


) 


O ksort() — сортировка по ключам в алфавитном порядке; 


П krsort () — сортировка по ключам в обратном порядке: 


Ѕагг = аггау( Один" => 1, 
krsort ($arr, SORT_STRING) ; 
print_r ($arr); 


// Array ( [Три] => 3 [Один] 


"Три! => 3); 


) 


Во втором параметре в функциях sort (), asort (), arsort (), кѕогі () И krsort() MOX- 


но указать константы: SORT_RI 


чисел), SORT_STRING (сравнение строк), зовт LOCALI 


T 


EGULAR (типы не меняются), SORT_NUMERIC (сравнение 
Е STRING (сравнение строк с уче- 


том локали) И 5ОКТ МАТОКАТ, (сравнение строк с использованием естественного упо- 


рядочения). Совместно с константами SORT STRI 


G И ОКТ МАТОВАЪ МОЖНО указать 


константу 5Оокт ЕАС CASE. В этом случае сортировка будет выполняться без учета 
регистра символов (с кодировкой ОТЕ-8 это не работает). Обратите внимание: 
чтобы сортировка была без учета регистра символов, для кодировки ОТЕ-8 нужно 
указать константу Зот ІОСАІЕ STRING и настроить локаль: 


Ѕагг = аггау('единица1', "Единый", 


sort ($агг); 
ргіпе к(багк); 


// Array ( [0] => Единица? [1] 
setlocale(LC_ALL, "та КО", 'Russian Вазз1а'); 
sort ($агк, ЅОКТ ІОСАТЕ STRING); 


ргіпе к(багк); 


// Array ( [0] => единица1 [1] 


Единица2"); 


=> единица] ) 


> Единый ) 


Отсортировать массив, используя естественное упорядочение, позволяют функции 


natsort () И natcasesort (): 


Ѕагг = аггау('уа11', 'уа12', 


sort (Ѕагг); // Обычная сортировка 


ргіпе к(багк); 


// Array ( [0] => vall [1] => val 
natsort ($arr); // Естественное упорядочение 


ргіпе к(багк); 


// Array ( [0] => vall [2] => val 


) 


) 
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Создание пользовательской сортировки 


Если нужно изменить порядок стандартной сортировки, можно задать свою сорти- 
ровку с помощью следующих функций: 


С usort() — для пользовательской сортировки списков; 

С uksort() — для пользовательской сортировки ассоциативных массивов по клю- 
чам; 

С uasort() — для пользовательской сортировки ассоциативных массивов по зна- 
чениям. 


В качестве первого аргумента этим функциям передается массив. а второй аргу- 
мент должен содержать имя функции, сравнивающей два элемента. Функция срав- 
нения принимает два параметра и должна возвращать: 


П положительное число если первый больше второго; 


С отрицательное число — если второй больше первого; 
С о — если элементы равны. 


Например, стандартная сортировка по умолчанию зависит от регистра символов: 


Ѕагг = аггау('единица1', 'Единый', "Единица2"); 
sort ($arr); 
print_r ($arr); 


// Array ( [0] => Единица2 [1] => Единый [2] => единица1 ) 


В результате мы получим неправильную сортировку, ведь Единый И Единица2 больше 
единица1. Изменим стандартную сортировку на свою собственную, не учитываю- 
шую регистр (листинг 5.18). 


Листинг 5.18. Сортировка без учета регистра 


function cmp ($3611, $str2) { 
// Преобразуем к нижнему регистру 
$56.1 = пр _strtolower($str1, 'ОТЕ-8'); 
Şstr2 = пр _strtolower ($str2, 'ОТЕ-8'); 
// Сравниваем 


return strcmp ($36:1, $5612); 


Ѕагг = аггау('единица1', 'Единый', "Единица2"); 
usort ($arr, "сшр"); 


print_r ($arr); 


// Array ( [0] => единица1 [1] => Единица2 [2] => Единый ) 


Для получения правильной сортировки мы приводим две переменные к одному 
регистру, а затем осуществляем сравнение с помощью функции strcmp (). Заметьте, 
что регистр самих элементов массива не изменяется, т. к. в функцию передаются 
копии значений. 
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5.6.12. Получение части массива 
Получить часть массива позволяет функция array 511се(), имеющая следующий 
формат вызова: 


int $length=null[, 
array 


array_slice (array $array, int $offset[ 


bool $preserve_keys=false]]) 


Функции передаются следующие параметры: 
п 
п 


Ѕаггау -- исходный массив; 


$offset — число элементов от начала (положительное значение) или от конца 
(отрицательное значение) массива, которое нужно пропустить; 


$length — число элементов, которое нужно получить из исходного массива. 
Если параметр опущен или имеет значение null, то элементы выбираются до 
конца массива. Если указано отрицательное значение, то оно задает смещение 
от конца массива; 


o Şpreserve_keys -- если параметр имеет значение true, TO ключи массива сбрасы- 


ваться не будут. 


Пример: 

$arr = array(1, 2, 3, 4, 5); 

багг2 = аггау в1ісе(багк, 2, 3); 

ргіпе г($агг2); // Array ( [0] => 3 [1] => 4 [2] ->5) 
багг2 = аггау в1ісе(багк, -4, 3); 

ргіпе г($агг2); // Array ( [0] => 2 [1] => 3 [2] => 4) 
багг2 = аггау 511се ($агг, 2, null, false); 

ргіпі г($агг2); // Array ( [0] => 3 [1] => 4 [2] => 5 ) 
багг2 = аггау в1ісе(багк, 2, -1, true); 

ргіпі г($агг2); // Array ( [2] => 3 [3] => 4) 


Полученную часть массива можно заменить одним элементом или массивом эле- 
ментов с ПОМОЩЬЮ функции аггау зр11се (9% Вызов функции осуществляется так: 
астау ѕр1ісе (array &$input, int $offset[, 


int $length=count ($input) [, 
mixed $replacement=array()]] 


array 


Первые три параметра имеют такое же назначение, как и у функций array slice(). 
Если параметр $length имеет значение 0, то параметр $offset задает место вставки 
элементов. Четвертый параметр $гер1асешепе — один элемент или массив эле- 
ментов, добавляемый вместо выбранных элементов. Функция возврашает массив 
с удаленными элементами: 


бакгі ЖАҚЫ 
7, 8); 


аггау вріісе(бакг1, 2, 3, багг2); 


аттау(1, 4, 5); 


$arr2 array (6, 


print_r ($arr1); 


Основы РНР. Создаем динамические И/еБ-страницы 509 


// Array ( [0] => 1 [1] = 2 [2] => 6 [3] => 7 [4] => 8 ) 
аггау зр11се ($агг2, 2, 0, 88); 

ргіпе к($агг2); 

// Array ( [0] => 6 [1] => 7 [2] => 88 [3] => 8 ) 


5.6.13. Преобразование переменных в массив 


Функция compact () позволяет преобразовать переменные в ассоциативный массив. 
Ключами становятся имена переменных, а значениями — значения переменных: 


$varl = 1; 
$var2 = 2; 
$var3 = 3; 
Ѕагг = compact ('уаг1', 'уаг2', 'var3'); 


ргіпе к(багк); 
// Array ( [varl] => 1 [уаг2] => 2 [var3] => 3 ) 


5.6.14. Преобразование массива в переменные 


Функция extract() создает переменные с именами, соответствующими именам 
ключей, и значениями, соответствующими значениям элемента ассоциативного 
массива. Формат вызова функции: 


ехігасї (<Массив> |, <Способ>[, <Префикс>]]) 
Можно указывать следующие параметры: 
П <массив> — исходный ассоциативный массив; 


С <способ> — способ обработки конфликтных ситуаций. Может принимать сле- 
дующие значения: 


® EXTR OVERWRITE — если переменная существует, то ее значение перезаписыва- 
ется (значение по умолчанию); 


Ф EXTR SKIP — если переменная существует, то элемент массива пропускается; 


© EXTR РВЕҒІХ SAME — если переменная существует, то перед именем перемен- 
ной будет добавлен префикс, указанный в параметре <префикс>; 


® EXTR PREFIX ALL — перед именем всех переменных будет добавлен префикс, 
указанный в параметре <Префикс>; 


© EXTR PREFIX INVALID — если имя переменной некорректно, то будет добавлен 
префикс, указанный в параметре <Префикс>; 


 ЕХТЕ ТЕ ЕХІ5Т5-- извлекает значения только тех переменных, которые уже 
существуют; 


© EXTR PREFIX ТЕ ЕХІ5Т5--- извлекает значения только тех переменных, KOTO- 
рые уже существуют, при этом создавая новое имя с префиксом, указанным 
в параметре <Префикс>; 


® EXTR КЕЕ5-- извлекает переменные как ссылки. 
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Пример: 
$var1 = "Поивет"; 
Ѕагг = array ('var1' => '\1', 'var2' => "у2!, 'var3' => 'ү3'); 


extract ($arr, EXTR_PREFIX SAME, аа 
echo "$var1 55 уаг1 5чаг2 $уаг3"; 


// Привет у1 v2 v3 


Так как переменная $varl существует, то перед именем создаваемой переменной 
будет добавлен префикс з_. Все остальные ключи будут преобразованы в одно- 
именные переменные. 


5.6.15. Заполнение массива значениями 


Создать массив, содержащий диапазон чисел, можно либо с помощью цикла, либо 
с помощью функции range (). Функция имеет следующий формат: 


range (mixed $start, mixed $епа[, number $з6ер=1]) : array 


Создадим массив, состояший из диапазона чисел от 1 До 10: 
Ѕагг = гапае(1, 10); 
foreach ($arr аз $value) 1 


echo $value . " "; 
һҺ//123245678910 


В параметре $з+ер можно указать шаг (значение по умолчанию: 1): 


Ѕагг = гарае(1, 10, 2); 
foreach ($arr аз $value) { 


echo $value . р 
у 35. 1:9 


Если нужно заполнить массив одинаковым значением, то следует воспользоваться 
функцией array Е111(). Формат функции: 

аггау #111 (11 $ѕіагі іпдӢех, int $num, mixed $value) : array 

В первом параметре указывается начальный индекс, во втором — число элементов, 
а в третьем — значение. Заполним массив из 10 элементов числами 0: 


багг = array Ғ111(0, 10, 0); 
foreach ($arr аз $value) { 


echo $value . р 
} 10000000000 


5.6.16. Преобразование массива в строку 


Преобразовать массив в строку можно с помощью нескольких функций: 


П ітріоде() — преобразует массив в строку. Элементы добавляются через указан- 
ный разделитель: 
$arr = аггау(1, 2, 3, 4, 5); 
$str = ішріоде(", ", $агг); 
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echo $str; // 1, 2, 3, 4, 5 
$str = ішріосде(" - ", $arr); 
echo $str; //1-2-3-4-5 


П join() -- полностью аналогична функции implode (); 

o serialize() — позволяет преобразовать любой массив в строку специального 
формата: 
Ѕагг = аггау('Фамилия', 'Имя'); 


$str = зег1а117е ($агк); 
echo $str; // а:2:11:0;5:14:"Фамилия";1:1;5:6: "Имя";) 
п опѕегіа1їіхе () — используется для восстановления массива из строки, преобра- 
зованной с помощью функции serialize (): 
Ѕагг = array ('Фамилия', 'Имя'); 


$str = serialize (Ѕагг); 
$агг2 = unserialize ($51); 


ргіпе г($агх2); // Array ( [0] => Фамилия [1] => Имя ) 
С ргіпе с() — позволяет вывести структуру массива: 
Ѕагг = аггау( "Один", "Два", "Три"); 
ргіпе к(багк); 
/ ж 
Аггау 
( 
[0] => Один 
[1] => Два 
[2] => Три 
А 
П var аотр() — выводит подробную информацию о структуре массива: 


Ѕагг = аггау('Один', 2, 'Три'); 
var_dump ($агг); 

/х 

аггау (3) { 


ѕігіпдо (8) "Один" 


int (2) 

[2] => 

ѕігіпо (6) "Три" 
S, 


ВНИМАНИЕ! 

Функции ргіпе г() И var dump() позволяют выводить не только структуру массивов, но 
и значения других переменных. Поэтому они часто применяются на этапе отладки 
программы. 
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5.6.17. Проверка наличия значения в массиве 


Функция іп аггау() позволяет проверить наличие значения в массиве. Возвращает 
true, если значение присутствует. Формат функции: 


іп array (mixed $needle, array $haystack[, bool ӛзегісі-Ға15е|) : bool 


Параметр $needle может быть числом, строкой или массивом. Если указана строка, 
то сравнение проводится с учетом регистра символов. Если необязательный пара- 
метр strict имеет значение true (значение по умолчанию: false), То дополнитель- 
но выполняется проверка соответствия типов данных. 


Пример: 
Ѕагг = аггау('один', '1', 20); 
var dump (in акгау('один', Фагг)); // bool (true) 


var dump (іп аггау("Один', $агг)); 

// Выведет bool (false), т. к. не совпадает регистр символов 
var dump (in агкау('1', $arr)); // роо1 (true) 

var dump (іп акгау(20, $arr, true)); // bool (true) 

var dump (іп аггау('20', $arr, true)); 

// Выведет bool (false), т. к. не совпадают типы данных 


Выполнить поиск и получить индекс (ключ) первого найденного элемента с ука- 
занным значением позволяет функция array зеахсь(). Если элемент не найден, 
функция возвращает значение false. Формат функции: 


array_search (mixed $needle, array $haystack[, 


bool $strict=false]) : mixed 
Пример: 
$arr = аггау('один', '1', 20); 
уаг аџотр (аггау ѕеагсһ ("один', $агг)); // іпё (0) 
var_dump (аггау ѕеагсһ ('20', Загк)); // іпё (2) 
( 


var dump (аггау ѕеагсһ ('20', $агг, true)); 
// Выведет bool (false), т. к. не совпадают типы данных 


5.6.18. Операции со множествами 


Множество — это набор уникальных элементов, с которым можно сравнивать 
другие элементы, чтобы определить, принадлежат ли они этому множеству. В язы- 
ке РНР множеств нет, поэтому попробуем создать их самостоятельно на основе 
списков и ассоциативных массивов. 


Чтобы оставить в массиве только уникальные элементы, следует воспользоваться 
функцией array_unique (). Значения сравниваются как строки. Ключи сохраняются. 
Формат функции: 


array_unique (array Ѕ$аггау[, int $ѕогі Ғ1ад5-5ОЕКТ 5ТКІМСІ) : array 


Во втором параметре можно указать способ сортировки — константы: зОВТ_ВЕСОТАВ 
(типы не меняются), зовт момевкіс (сравнение чисел), 5окт 5ткімс (сравнение строк) 
И SORT_LOCALE STRING (сравнение строк с учетом локали): 
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Заит е р д 22, 3, 3 9, 31 

багг2 = array_unique ($агг); 

print _r($arr2); // Array ( [0] => 1 [3] => 2 [6] => 3 ) 
Şarr2 = array _ values ($arr2); // Переиндексация 
print_r($arr2); // Array ( [0] => 1 [1] => 2 [2] => 3 ) 
$arr = аггау( "Один" => 1, "Два" => 2, 


"Три!" => '1', "Четыре" => 4); 
багг2 = array_unique ($arr) ; 
print_r ($arr2); 
// Array ( [Один] => 1 [Два] => 2 [Четыре] => 4 ) 


Рассмотрим основные операции со множествами на основе списков: 
С объединение множеств (функция аггау merge ()): 


батгі = аггау(1, 2, 3); 

$arr2 = аггау(3, 4, 5); 

Şarr3 = аггау пегде(багк1, $агг2); 

Şarr3 = аггау _ unique ($arr3); // Выбор уникальных элементов 
Şarr3 = аггау уа1аез($агг3); // Переиндексация 

ргіпе к($аггЗ); 

// Аттау ( [0] => 1 [1] => 2 [2] => 3 [3] => 4 [4] => 5 ) 


П разница множеств (функция array diff() ИЛИ array udiff ()): 


Ѕаггі = аггау(1, 2, 3); 
$arr2 = аггау(1, 2, 4); 
Şarr3 = аггау а1ЕЁ($агг1, Ѕагг2); 


Şarr3 = array _ unique ($arr3); // Выбор уникальных элементов 
Şarr3 = аггау уа1аез($агг3); // Переиндексация 
ргіпе к(баге3); // Array ( [0] => 3 ) 


С пересечение множеств (функция array intersect () или array uintersect ()): 
Ѕаггі = array(3, 1, 2, 2, 3); 
$arr2 = array(1, 2, 4); 
Şarr3 = array_intersect ($агг1, $агг2); 


Şarr3 = array _ unique ($arr3); // Выбор уникальных элементов 
Şarr3 = array _values ($arr3); // Переиндексация 
print_r ($arr3); // Array ( [0] => 1 [1] => 2 ) 


С проверка наличия элемента (функция in array ()): 


Ѕагг аггау (3, 1, 2, 2, 3); 


Ѕагг агтау џпіаџе ($агг); // Выбор уникальных элементов 
// Переиндексация 
// bool (true) 


// bool (false) 


) 

Ѕагг = array чаічез(багк); 
var dump (in _array(1, $arr)); 
var dump (in _array(5, $arr)); 
В качестве элементов множества лучше использовать ключи ассоциативных масси- 
вов. Ключи всегда уникальны, и поиск ключа выполняется очень быстро. Однако 


тут есть ограничение — в качестве типа данных можно использовать или целое 
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число, или строку, другие типы данные не поддерживаются. В этом случае для 
объединения множеств следует использовать оператор +, для получения разницы — 
функцию array diff Кеу() (ИЛИ array diff океу()), для получения пересечения — 
функцию array intersect Кеу() (ИЛИ аггау intersect океу()), а для проверки 
существования элемента — оператор isset (): 


$агг1 аггау(1 => 1, 2 => 1, 3 => 1); 
Ѕагг2 = агкау(1 => 1, 2 => 1, 4 => 1); 
// Объединение множеств 
$arr3 = $arrl + $arr2; 

print_r ($arr3); // Array ( [1] => 1 [2] => 1 [3] => 1 [4] => 1) 
// Разница множеств 


$arr3 = array diff Кеу($агх1, 5агү2); 
ргіпе к($аггЗ); // Array ( [3] => 1) 


// Пересечение множеств 

Şarr3 = аггау іпёегѕесі Кеу($агг1, $агг2); 

ргіпе к(баге3); // Array ( [1] => 1 [2] => 1 ) 
// Проверка наличия элемента 

var dump (isset ($arr1[1])); // bool (true) 

var dump (isset ($arr1[5])); // bool (false) 


5.6.19. Фильтрация массива 


Функция array filter () позволяет выполнить фильтрацию массива. Формат функ- 
ЦИИ: 
array_filter (array Фаггау[, callable $са11раск=пи11[, 

int $flag=null]]) : array 


В первом параметре указывается исходный массив, а во втором -- функция обрат- 
ного вызова. Если параметр $flag не указан, то функция 5са11Баск принимает в Ka- 
честве параметра значение элемента. Если в параметре $flag указана константа 
ARRAY FILTER USE KEY, ТО функция $са11Ъаск принимает ключ элемента, а если зада- 
на константа ARRAY FILTER USE ВОТН-- и значение, и ключ. Внутри функции нужно 
выполнить сравнение и вернуть логическое значение. В итоговый массив попадут 
только те элементы, для которых функция вернула значение true. Если функция 
обратного вызова не указана, то будут удалены все элементы, равные в логическом 
контексте значению false. 


Функция array filter() возвращает отфильтрованный массив. Исходный массив 
не изменяется. Ключи сохраняются: 


Ѕагг = аггау(1, 2, 3, 4, 5, 6); 

багг2 = array_filter($arr, function ($value, $key) { 
return ($value < 4 && $key != 1); 

}, ARRAY FILTER USE BOTH); 

print_r( $arr2 ); // Array ( [0] => 1 [2] => 3 ) 
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С помощью функции аггау тар() можно применить пользовательскую функцию ко 
всем элементам массива. Функция возвращает отфильтрованный массив. Формат 
функции: 


array_map (callable $са11раск, array $аггау1[, array $...]) : array 


Пример сложения значений двух списков: 


Ѕаггі = аггау(1, 2, 3, 4, 5); 

аггау (1, 2, 3, 4, 5); 

Şarr3 = array тар (function (ба, $b) { 
return ($a + $b); 

}, $arrl, $arr2); 


$arr2 


print_r( $arr3 ); 
// Array ( [0] => 2 [1] => 4 [2] => 6 [3] => 8 [4] => 10 ) 


5.7. Строки 


Разрабатывая УҮер-сайты, часто приходится проводить манипуляции со строками. 
Поэтому необходимо знать и уметь использовать встроенные функции РНР, пред- 
назначенные для обработки строк. Например, перед добавлением сообщения в гос- 
тевую книгу можно удалить лишние пробелы и все теги из строки, добавить защит- 
ные слеши перед специальными символами или заменить их НТМГ-эквивалентами 
ит. д. 


5.7.1. Инициализация строк 


В языке РНР для хранения строк предназначен тип данных string: 


$s = "string"; 
var dump ($5); // string(6) "string" 


Строка может быть указана как внутри двойных кавычек, так и внутри апострофов: 


$s = 'string'; 
var_dump ($s); // string(6) "string" 


Если в переменную нужно записать большой объем текста, это можно сделать спо- 
собом, продемонстрированным в листинге 5.19. 


Листинг 5.19. Запись в переменную большого объема текста 


$s = <<<LABEL 


= 


Гекст на 
нескольких 
строках 
LABEL; 
echo $s; 
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Результат выполнения: 


Текст на 
нескольких 


строках 


В этом примере многострочный текст располагается между метками LABEL. Назва- 
ние метки может быть любым допустимым идентификатором. Вторая (закрываю- 
шая) метка должна быть написана с начала строки, и после нее должна стоять точка 
с запятой. Других символов на этой строке быть не должно. 


Название открывающей метки можно заключить в двойные кавычки или апостро- 
фы. В первом случае результат будет аналогичен строкам в двойных кавычках, а во 
втором — строкам внутри апострофов. Если кавычки не указаны, то результат 
будет аналогичен строкам в двойных кавычках: 


551 = <<<"LABEL1" 
Негеаос - аналог строки 


в двойных кавычках\п 
ТАВЕГ1; 
есһо 651; 


552 = <<<'LABEL2' 
Момаос - аналог строки 


в апострофах\п 
ТАВЕГ2 ; 
есһо 552; 


Результат выполнения: 


Негеаос - аналог строки 
в двойных кавычках 
Момаос - аналог строки 
в апострофах\п 


Обратите внимание: в последней строке результата специальный символ \n (пере- 
вод строки) был выведен как обычный символ, т. к. в строке, заключенной в апост- 
рофы, подстановка не осуществляется. 


5.7.2. Специальные символы в строке 


Внутри строки можно указать специальные символы — комбинации знаков, обо- 
значающие служебные или непечатаемые символы, которые невозможно вставить 
обычным способом. 


Приведем специальные символы, доступные в РНР в строках, ограниченных Двой- 
ными кавычками: 


С \п — перевод строки; 
С \= — возврат каретки; 


С \+ — горизонтальная табуляция; 
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С \у — вертикальная табуляция; 
O \£— перевод формата; 

О \" — кавычка; 

С \5 — знак доллара; 

O \\ — обратная косая черта. 


Кроме того, можно задавать символы восьмеричными или шестнадцатеричными 
кодами, записывая код символа после обратной КОСОЙ черты или символов хх, соот- 
ветственно: 


// Восьмеричное значени 

echo "\167"; // w 

// Шестнадцатеричное значени 
echo "\х77"; // w 


С помощью последовательности \: {м} можно вставить в строку символ в кодиров- 
ке Unicode: 


echo "\u{005B}"; // I 
echo "\u{005D}"; // ] 


В строках, ограниченных апострофами, эти специальные символы не работают. 
В них доступны только два специальных символа: 
О \' — апостроф; 


С \\ — обратная косая черта. 


5.7.3. Подстановка значений переменных в строку 


Очень часто необходимо сформировать строку, состоящую из имени переменной 
и (или) ее значения. Если написать: 

$х = 10; 

55 = "Значение равно 5х"; 


то переменная $5 будет содержать значение "Значение равно 10", аесли написать: 


$х = 10; 
$s = "Значение равно 5х"; 


то переменная $з будет содержать значение "Значение равно $х". Помните, что 
строка в кавычках и строка в апострофах вернут разные результаты. В последнем 
случае, для того чтобы получить значение переменной, можно воспользоваться 
операцией конкатенации строк: 

$х = 10; 

$s = "Значение равно ' . $x; 


Рассмотрим еше один пример. Предположим, нужно объединить два слова B одно. 
Одно из слов задано с помощью переменной. Если написать: 
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55 = "авто"; 
552 = "5 5транспорт"; 
echo 652; // 552 = "" или Notice: Undefined variable 


то переменная 552 будет содержать пустую строку, т. к. переменная 55транспорт не 
определена. В этом случае можно воспользоваться следующими способами: 


O использовать конкатенацию строк: 


$5 = "авто"; 
552 = $s . "транспорт"; 
есһо 552; // автотранспорт 


С указать имя переменной в фигурных скобках так: 


55 = "авто"; 
552 = "$ {3} транспорт"; 
есһо 552; // автотранспорт 


или так: 
$s = "авто"; 
552 = "{$3} транспорт"; 


есһо 552; // автотранспорт 
Если нужно вставить в строку имя переменной, то следует перед символом $ ука- 
зать обратную косую черту: 


$х = 10; 
$s = "Значение переменной \$х равно $x"; 


есһо 55; // Значение переменной $х равно 10 


5.7.4. Конкатенация строк 

Оператор . (точка) осуществляет конкатенацию строк, т.е. соединяет их в одну 
строку: 

55 = "Строка1" . "Строка2"; 

есһо 55; // Строка1Строка2 

Можно также воспользоваться оператором .-: 


55 - "Строка1"; 
55 .- "Строка2"; 
есһо 55; // Строка1Строка2 


С помошью конкатенации строк можно преобразовать любой тип данных в строку: 
5х - 10; 

var_dump ($x . ""); // string(2) "10" 

Аналогичный результат будет достигнут при указании переменной внутри двойных 
кавычек: 


ох =. 10 
var_dump ("$x"); // string(2) "10" 
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5.7.5. Строка в обратных кавычках. 
Запуск внешних программ 


Если содержимое строки заключить в обратные кавычки, то это позволит запустить 
внешнюю программу и присвоить переменной результат ее работы (листинг 5.20). 


Листинг 5.20. Запуск внешней программы 


<?php 

$v = `dir`; 

echo '<textarea cols="70" rows="30">!'; 
echo iconv ("cp866", "ОТЕ-8", $v); 

echo '</textarea>!; 


Этот код выведет содержимое каталога С\хатрр\ћаосѕ. При выводе используется 
кодировка DOS (кодовая страница 866), поэтому русские буквы будут искажены. 
Чтобы избежать этого, мы преобразуем кодировку с помощью функции iconv (). 


Аналогичный результат можно получить с помощью Функции ехес() (лис- 
тинг 5.21). Формат функции: 


exec (string $command[, array &$output=null[, 


int &$return var=null]]) : string 


Листинг 5.21. Запуск внешней программы с помошью функции exec () 


<?php 

Ѕагг = []; 

exec ("dir", багг); 

$v = implode ("\п", $arr); 

echo '<textarea cols="70" гомз="30">'; 
echo iconv ("ср866", "ОТЕ-8", $v); 

echo '</textarea>'; 


5.7.6. Обрашение к отдельному символу в строке 


Строка в языке РНР является массивом байтов, поэтому к любому символу строки 
можно обратиться как к элементу массива,-- достаточно указать его индекс 
в квадратных или фигурных скобках. Нумерация начинается с нуля. Можно как 
получить символ по индексу, так и изменить его значение: 


$s = "string"; 

echo $s[0]; // Выведет: $ 
echo 5511 // Выведет: 
55[3] = "о"; 


есһо $3; // Выведет: strong 
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Допускается указание индекса с отрицательным значением. В этом случае указан- 
ное значение вычитается из длины строки. Вот пример получения последнего сим- 
вола строки: 


$s = "string"; 
echo $s[-1]; // Выведет: g 
echo $s[strlen ($$) - 1]; // Выведет: g 


Для работы с отдельными символами предназначены следующие функции: 
О ср: (<АЅСІІ-код символа>) — возвращает символ по указанному коду: 


echo срг (81); // Выведет: Q 


С оха (<Символ>) — возвращает АЗСП-код указанного символа: 


echo ога ("0"); // Выведет: 81 


При работе с многобайтовыми кодировками доступ по индексу вернет лишь часть 
символа (один байт), а не символ целиком. Все указанные ранее примеры работают 
с кодировкой ОТЕ-8 лишь по причине того, что английские буквы кодируются 
одним байтом. Если же мы попробуем обратиться по индексу при использовании 
строки с русскими буквами, которые кодируются двумя байтами, то получим 
какой-то непонятный символ (половинку от русской буквы). В этом случае для 
получения отдельного символа нужно воспользоваться функцией mb substr (): 


$s = "строка"; // Кодировка ОТЕ-8 

echo ога ($$[0]); // Выведет: 209 
echo ога ($$[1]); // Выведет: 129 
echo mb substr ($5, 0, 1, "ОТЕ-8'); // Выведет: с 


echo mb ѕирѕіг ($5, 1, 1, 'ОТЕ-8'); // Выведет: т 


5.7.7. Строки в кодировке ОТЕ-8 


Итак, в предыдущем разделе мы столкнулись с первой особенностью при исполь- 
зовании кодировки ОТЕ-8 — строка в этой кодировке является массивом байтов, а 
не массивом символов. При доступе по индексу мы получим один байт из символа. 
Тем не менее, к символам кодировки ASCII мы можем обратиться как к элементам 
массива, т. к. они кодируются одним байтом: 


$s = "string"; 

echo $s[0]; // Получили букву S 

$5 = "строка"; 

echo 55101; // Получили лишь один байт, а не букву с! 


В однобайтовых кодировках символ кодируется одним байтом. Первые 7 битов по- 
зволяют закодировать 128 символов, соответствующих кодировке ASCII. Символы, 
имеющие код меньше 33, являются специальными, — например, нулевой символ, 
символ перевода строки, табуляция и т. д. Получить остальные символы позволяет 
следующий код: 
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for (бі = 33; $i < 128; $i++) { 
есһо $1 . " =8&91; " . сһе(51) . "<рг>\п"; 
} 


Коды этих символов одинаковы практически во всех однобайтовых кодировках. 
Восьмой же бит предназначен для кодирования символов национальных алфавитов. 
То есть однобайтовые кодировки позволяют закодировать всего 256 символов. 


К любому символу строки в однобайтовой кодировке (например, windows-1251 или 
КОІ18-К) можно обратиться как к элементу массива. Достаточно указать его индекс 
в квадратных скобках. Нумерация начинается с нуля: 


$s = "строка"; // Кодировка міпаом5-1251 
есһо 55101; // Выведет: с 


В кодировке ОТЕ-8 один символ может кодироваться несколькими байтами. Пер- 
вые 128 символов соответствуют кодировке ASCII и кодируются всего одним бай- 
том. Остальные символы кодируются переменным числом байтов от двух до шести 
(на практике только до четырех). Буквы русского алфавита и некоторых других 
европейских языков кодируются двумя байтами. По этой причине использовать 
обычные строковые функции нельзя, т.к. они работают в большинстве случаев 
с однобайтовыми кодировками. 


Для работы с многобайтовыми кодировками (в том числе и с ОТЕ-8) необходимо 
использовать функции из библиотек iconv и php mbstring. Подключение библиоте- 
ки php mbstring производится в конфигурационном файле php.ini с помощью сле- 
дующей инструкции (перед инструкцией не должно быть точки с запятой, являю- 
щейся комментарием): 


extension=php mbstring.dll 


B PHP 7.2 инструкция имеет следующий формат: 


extension=mbstring 
В пакете XAMPP библиотека php mostring подключается по умолчанию. 


Все функции из этих библиотек содержат параметр $encoding, в котором нужно 
указать кодировку строки. Например, функция mb substr (), с помощью которой мы 
получали отдельный символ, имеет следующий формат: 


mb substr (string $str, int $start[, int $length=null[, 
string $encoding=mb_internal_encoding()]]) : string 


Обратите внимание: параметр $encoding является необязательным. Если параметр 
не указан, то: 


С при вызове функций, начинающихся с префикса mb , используется значение, 
указанное в функции mb internal епсодіпа(). До версии 5.6 также использова- 
лось значение директивы пьзЕк1п9.1пЕехпа1 епсоаіпо. В РНР 7.1 установка зна- 
чения этой директивы выводит предупреждающее сообщение, что директива 
устарела, и следует использовать internal_encoding ИЛИ default_charset. Однако 
функция mb internal encoding() такого сообщения не выводит, но при этом 
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берет значение из директивы mbstring.internal encoding. Проблема в том, что 
все функции из этой библиотеки получают значение кодировки по умолчанию 
из функции пр іпбекпаі епсодіпа(), а не из директивы default charset. Поэтому 
установка значений в директивах internal encoding И default_charset не меняет 
кодировку по умолчанию, хотя вроде как должна; 

С при вызове функций, начинающихся с префикса iconv , используется значение 
директивы іпёегпа1 епсойіпо ИЛИ default_charset (до версии 5.6 использовалось 
значение директивы iconv.internal encoding или значение, указанное в функ- 
ЦИИ iconv set_encoding ()). 


Иными словами, в программе мы можем: 
ОС либо указать кодировку в функции: 
$s = "строка"; 
echo шо substr ($5, 0, 1, "ОТЕ-8'); // Выведет: с 
П либо настроить кодировку в начале программы и в функции ее не указывать: 
пр іпбсекпаі епсоаіпо ("ОТЕ-8'); 
55 - "строка"; 


echo по substr ($5, 0, 1); // Выведет: с 


П либо настроить сервер и РНР на нужную кодировку и вообше кодировку не ука- 
зывать. 


Проверить, какая кодировка настроена по умолчанию, позволяет следующий код: 


echo ini get ('default_charset'); // ОТЕ-8 
echo шо internal encoding (); // ОТЕ-8 


Напомним, что в главе 4 мы настроили сервер и РНР на кодировку ОТЕ-8, поэтому 
в обоих случаях вы должны получить именно эту кодировку в качестве результата. 
Кроме того, в разд. 4.3 мы создали каталог C:\xampp\htdocs\cp1251 и настроили для 
него кодировку по умолчанию windows-1251. Поэтому результат выполнения про- 
граммы из этого каталога должен быть следующим: 


echo ini _ get ('default_charset'); // windows-1251 
Каким будет возврашаемое значение функции mb internal encoding() при работе 


с кодировкой уіпӣоуѕ-1251 не важно, т.к. функции из библиотеки php mbstring 
в этом случае практически не используются. 


Кодировкой ОТЕ-8 в этом издании книги мы пользуемся по умолчанию. Однако 
в этом разделе мы будем рассматривать и функции, предназначенные для работы 
с однобайтовыми кодировками. Если указан комментарий: 


// Кодировка файла windows-1251 


то такой код нужно запускать именно из каталога Сл\хатрр\ћіаосѕ\ср1251. Причем не 
забудьте и сам файл с программой сохранить в кодировке windows-1251. 


Если комментарий не указан, то используется кодировка ОТЕ-8. Еще раз напомним, 
что в этом случае при сохранении файла с программой в Notepad++ в меню Коди- 
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ровки должен быть установлен флажок Кодировать в ОТЕ-8 (без ВОМ). В про- 
тивном случае метка порядка байтов (сокращенно, ВОМ) может стать причиной 
ошибок при формировании заголовков ответа сервера из программы. 


5.7.8. Преобразование кодировок 
Для преобразования кодировок используется функция mb convert епсодіпа() CO 
следующим форматом вызова: 


пр convert_encoding (<Исходная строка>, <Нужная кодировка>[, 
<Исходная кодировка>]) 


Вот пример преобразования строки из кодировки ОТЕ-8 в windows-1251: 
Şstr = mb сопуегЕ епсодіпа ("Строка", "міпаомѕ-1251", "ОТЕ-8"); 

echo віегіеп(5віг); // 6 

Получить список поддерживаемых кодировок можно так: 


багг = пр 115% епсодіпа5(); 
sort ($агг, ЗОВТ МАТОВАТ | 5ОКТ ЕЪАС CASI 
ргіпе к($агг); 


[Е] 
` 


Функция iconv() также преобразовывает символы строки из одной кодировки 
в другую. Формат функции: 


iconv (<Исходная кодировка>, <Нужная кодировка> [<Флаг>], 
<Исходная строка>) 


Пример преобразования строки из кодировки windows-1251 в ОТЕ-8: 


// Кодировка файла м1паом$-1251 
$str = iconv ("windows-1251", "ОТЕ-8", "Строка"); 
echo вігіеп(5вег); // 12 


Необязательный параметр <Флаг> может принимать следующие значения: 


С //твАм51ІТ-- если символа нет в нужной кодировке, он заменяется одним или 
несколькими аналогами; 


С //тсмовЕ 


символы, которых нет в нужной кодировке, будут опущены. 


Зачем нужен этот параметр? Если мы преобразовываем кодировку windows-1251 
в ОТЕ-8, то в этом параметре нет необходимости. А вот если наоборот, то может 
возникнуть ситуация, что символа нет в нужной кодировке, т. к. кодировка ОТЕ-8 
позволяет хранить несколько тысяч символов, а кодировка windows-1251 только 
256 символов. Если не указать этот параметр, то строка будет обрезана до первого 
недопустимого символа: 


$str = ісопу ("ОТЕ-8", "\м1раомз-1251//ТСМОВЕ", "Строка"); 
echo strlen ($str); // 6 


ВНИМАНИЕ! 


Порядок следования параметров в функции mb convert encoding() отличается от NO- 
рядка в функции ісопх(). 
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С помощью функции сопуесе суг зегіп9() можно преобразовать строку из одной 


однобайтовой кодировки в другую. Формат функции: 


convert суг ѕігіпа (<Исходная строка>, <Исходная кодировка>, 
<Нужная кодировка>) 


Значения параметров <Исходная кодировка> И <Нужная кодировка> 


O аили а — кодировка х-ср866; 
П і — кодировка 1508859-5; 

С к — кодировка КО18-К; 

П п — кодировка х-тас-сугШІс; 
П „м — кодировка windows-1251. 


Пример вызова функции: 


// Кодировка файла windows-1251 
$str = "УФТПЛВ"; 
echo convert_cyr_string($str, "К", "м"); // Выведет: Строка 


5.7.9. Определение длины строки 


Получить длину строки позволяют следующие функции: 


o mb strlen (<Строка>[, <Кодировка>]) -- возвращает число символов в строке: 
$str = "Строка"; 
echo mb strlen ($str, 'ОТЕ-8'); // 6 

п ісопу _ strlen (<Строка>[, <Кодировка>]) -- возвращает число символов в строке: 
$str = "Строка"; 
echo ісопу strlen($str, 'ОТЕ-8'); // 6 

П strlen (<Строка>) — возвращает число байтов в строке. Так как в однобайтовых 


кодировках один символ описывается одним байтом, функция зігіеп () возвра- 
щает число символов. Для многобайтовых кодировок функция возвращает 


именно число байтов: 


$str = "Строка UTF-8'; 


echo strlen ($str); // 18 
$str = iconv ('UTF-8', 'windows-1251', $str); 
echo strlen (str); Ж 12 


Почему же мы получили 18 байтов, а не 247 Все дело в том, что в кодировке 
ОТЕ-8 первые 128 символов кодируются одним байтом, а все последующие 
символы — несколькими байтами. Каждый символ в слове строка занимает по 
два байта, а в последующей части строки ( UTF-8) каждый символ занимает один 


байт. Итого: 6 умножить на 2 плюс 6 равно 18 байтов. 


ВНИМАНИЕ! 


Если в файле php.ini директива mbstring.func overload равна 2 или 7, то функция 
вегіеп() полностью эквивалентна функции mb strlen(). Это означает, что функция 
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вЕгіеп() будет возвращать число символов, а не байтов. Начиная с версии 7.2, mexa- 
низм перегрузки функций объявлен устаревшим и не рекомендуется к использованию. 


5.7.10. Настройка локали 


Локалью называют совокупность локальных настроек системы. Настройки локали 
для разных стран различаются. Например, в одной стране принято десятичный раз- 
делитель вещественных чисел выводить в виде точки, а в другой — в виде запятой. 
Настройки локали влияют также на работу с датой и со строками — например, 
изменение регистра символов при неправильно настроенной локали может выпол- 
няться некорректно. 


Для установки локали используется функция вес<1оса1е(). Формат функции: 


зеї1оса1е (<Категория>, <Локаль>) 


Параметр <Категория> может принимать следующие значения: 


С тс дш. — устанавливает локаль для всех режимов; 

С LC COLLATE — для сравнения строк; 

С LC CTYPE — для перевода символов в нижний или верхний регистр; 
С LC MONETARY — для отображения денежных единиц; 

С LC NUMERIC — для форматирования вещественных чисел; 

П LC TIME — для форматирования вывода даты и времени. 


Настройка локали различна в UNIX и Windows. В UNIX при настройке русской ло- 
кали используется следующий синтаксис: 


зеЕ1оса1е (1С ALL, "ко ҚО"); 
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Ав Windows такой: 


ѕеі1оса1е (1С АШ, "Вазз1ап Виз51а'); 


Чтобы не было зависимости от операционной системы, достаточно привести сразу 
несколько локалей через запятую: 


ѕеі1оса1е (1С ALL, "ка КО", 'Коѕѕіап Вазз1а'); 


или в виде массива: 


ѕеі1оса1е (1С АШ, array('ru КО", 'Киѕѕіап Russia')); 


Если установить локаль удалось, то функция вернет имя установленной локали, 
в противном случае — значение false. 


После имени локали через точку можно задать кодировку: 


ѕеі1оса1е (1С А1, "ка КО.СР1251', 'Киѕѕіап Коѕѕіа.1251'); 


Если во втором параметре указана пустая строка или значение по11, то настройки 
локали будут взяты из переменных окружения. Если во втором параметре задано 
значение "0", то функция вернет текущее значение локали, не изменяя его: 
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echo зеЕ1оса1е(1С АШ, "0"); 
// 1С СОШАТЕ=С;1С СТУРЕ=Ва$$1ап Russia.1251; 


// ІС МОМЕТАВУ=С;1С МОМЕВТС=С;1С ТІМЕ-С 
printf ("%.2#\п", 10.5125484); // 10.51 
setlocale (1С АШ, "та КО", 'Russian Вазз1а'); 


echo зеЕ1оса1е (1С ALL, "0"); 
// Russian Russia.1251 
printf ("%.2Е", 10.5125484); // 10,51 


5.7.11. Изменение регистра символов 


Для изменения регистра символов в строке предназначены следующие функции: 


П mb strtoupper (<Строка>[, <Кодировка>1) — приводит все символы строки к верх- 
нему регистру: 


$str = "строка СТРОКА СтРоКа"; 
echo mb _strtoupper ($str, 'ОТЕ-8'); // СТРОКА СТРОКА СТРОКА 


П вегеовррес() — преобразует все буквы в строке к верхнему регистру: 


// Кодировка файла м1паом$-1251 


ѕеі1оса1е (1С СТУРЕ, "ги ҚО", 'Russian Russia'); 
$str = "строка СТРОКА СтРоКа"; 
echo strtoupper ($str); // СТРОКА СТРОКА СТРОКА 


По умолчанию работает только с однобайтовыми кодировками; 


П mb strtolower (<Строка>[, <Кодировка>1) — приводит все символы строки к ниж- 
нему регистру: 


$str = "строка СТРОКА СтРоКа"; 
echo mb _strtolower ($str, 'ОТЕ-8'); // строка строка строка 


П сегесіомес() — преобразует все буквы в строке к нижнему регистру: 


// Кодировка файла windows-1251 
ѕеі1оса1е (1С СТУРЕ, 'га ҚО", "Каввіап Russia'); 
$str = "строка СТРОКА СтРоКа"; 


echo strtolower ($str); // строка строка строка 


По умолчанию работает только с однобайтовыми кодировками; 


П mb convert саѕе (<Строка>, <Режим>[, <Кодировка>]) -- преобразует регистр 
символов в зависимости от значения параметра <Режим>, который может прини- 
мать следующие значения: 


522) 


МВ САЗЕ ОРРЕВ — приводит все символы строки к верхнему регистру; 


© MB CASE LOWER — приводит все символы строки к нижнему регистру; 
ө MB CASE TITLE — приводит первые символы всех слов к верхнему регистру. 
Примеры: 


$str = "строка СТРОКА СтРоКа"; 
echo mb сопчеге сазе(5зес, МВ САЅЕ ОРРЕК, "ОТЕ-8"); 
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// СТРОКА СТРОКА СТРОКА 

echo '<br>'; 

echo mb сопчеге сазе(5зес, MB_CASE_LOWER, 'UTF-8'); 
// строка строка строка 
echo '<br>'; 

echo mb сопчеге сазве(5зес, МВ САЗЕ ТІТІЕ, 'UTF-8'); 
// Строка Строка Строка 


П ucfirst() -- преобразует первую букву строки к верхнему регистру: 


// Кодировка файла windows-1251 

ѕеі1оса1е (1С СТУРЕ, "го ҚО", "Каввіап Russia'); 

$str = "строка СТРОКА СтРоКа"; 

echo ucfirst ($36); // Строка СТРОКА СтРоКа 
echo ucfirst (strtolower ($str)); // Строка строка строка 


Работает только с однобайтовыми кодировками; 


С оскогаѕ () — преобразует первые буквы всех слов к верхнему регистру. Работает 
только с однобайтовыми кодировками. Формат функции: 


ucwords (string $str[, string $delimiters]): string 
B параметре $delimiters можно указать символы, которые допускаются перед 
словом. Значение по умолчанию: " \&\х\п\Е\м": 


// Кодировка файла windows-1251 
ѕеі1оса1е (1С СТУРЕ, "ги ҚО", 'Russian Russia'); 
$str = "строка СТРОКА СтРоКа"; 


echo исмогаз ($36); // Строка СТРОКА СтРоКа 

echo ucwords (strtolower ($str)); // Строка Строка Строка 

$str = 'строка+строка+строка'; 

echo ucwords ($str, "+"); // Строка+Строка+Строка 
ВНИМАНИЕ! 


Если в файле php.ini директива mbstring.func overload равна 2 или 7, то функция 
strtoupper () будет эквивалентна функции шо вегбеосррек(), А функция strtolower() — 
функции mb strtolower(). Начиная с версии 7.2, механизм перегрузки функций объяв- 
лен устаревшим и не рекомендуется к использованию. 


5.7.12. Получение фрагмента строки 


Получить фрагмент строки позволяют следующие функции: 


П mb substr () — возвращает подстроку указанной длины, начиная с заданной по- 
зиции. Если длина не указана или задано значение null, то возвращается под- 
строка, начиная с заданной позиции и до конца строки. Формат функции: 


mb substr (<Строка>, «Начальная позиция>[, <Длина>(, <Кодировка>11) 
Пример: 


$str = "Строка"; 
echo шо substr ($str, 0, 1, "ОТЕ-8'); ЖАК 
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echo mb substr ($str, 2, 3, "ОТЕ-8'); // рок 
echo шо substr ($str, -3, 3, 'ОТЕ-8'); // ока 
echo mb substr ($str, 0, null, 'ОТЕ-8'); // Строка 


п iconv_substr () — возвращает подстроку указанной длины, начиная с заданной 
ПОЗИЦИИ. Если длина не указана, то возвращается подстрока, начиная с заданной 
позиции и до конца строки. Формат функции: 


iconv_substr (<Строка>, «Начальная позиция>[, <Длина>[, <Кодировка>11) 


Пример: 
$str = "Строка"; 
echo iconv зорзех($56х, 0, 1, 'UTF-8'); // С 
echo iconv зирэіг ($зір, 2, 3, 'ОТЕ-8'); // рок 
echo iconv substr ($56х, -3, 3, 'ОТЕ-8'); // ока 
П substr() — возвращает подстроку указанной длины, начиная с заданной пози- 


ции. Если длина не указана, то возвращается подстрока, начиная с заданной по- 
зиции и до конца строки. По умолчанию работает только с однобайтовыми ко- 
дировками. Формат функции: 


substr (<Строка>, <Начальная позиция>[, <Длина>1) 


Пример: 

// Кодировка файла windows-1251 
$str = "Строка"; 

есһо вирвекг(5віек, 0, 1); //С 
echo substr ($str, 1); // трока 


echo substr ($str, -1, 1); // а 


ВНИМАНИЕ! 


Если в файле php.ini директива mbstring.func overload равна 2 или 7, то функция 
зарзег() будет полностью эквивалентна функции mb вирвес(). Начиная с версии 7.2, 
механизм перегрузки функций объявлен устаревшим и не рекомендуется к использо- 
ванию. 


5.7.13. Сравнение строк 


Если попытаться сравнить две строки, содержащие числа, или строку и число с по- 
мощью операторов == и !-, то строки будут преобразованы в числа. После этого 
будут сравниваться числа, а не строки: 


var dump ("10 а" == 10); // bool (true) 

var dump ("10" == "010"); // bool (true) 

Если попытаться использовать оператор <->, то результат будет таким же: 
маг аӢџотр ("10 а" <=> 10); // іпё (0) 

var dump ("10" <=> "010"); // іпё (0) 


Чтобы преобразования типов не происходило, нужно использовать операторы 
сравнения === и ! ==: 


Основы РНР. Создаем динамические И/еЬ-страницы 529 


var dump ("10 а" === 10); // bool (Ға1ѕе) 
var dump ("10" === "010"); // bool (false) 
var _dump("10 a" === "10 а"); // bool (true) 


Для сравнения строк предназначены следуюшие функции: 


С ѕігстр (<Строка1>, <Строка2>) — сравнивает две строки. Возвращает одно из 
трех значений: 


e 0 — если строки равны; 
® положительное число — если <Строка1> больше <Строки2>; 


® отрицательное число — если <Строка1> меньше <Строки2>. 


Пример: 
5зігі = "Строка1"; 
$str2 = "Строка2"; 


echo strcmp ($strl, $str2); // -1 


Функция зависит от регистра символов. Если нужно сделать сравнение не зави- 
сяшим от регистра, то следует предварительно изменить регистр символов: 


5зігі = "строка"; 
$str2 = "СТРОКА"; 
var дшпр( strcmp ($56х1, $str2) ); // іп (1) 


// Преобразуем к нижнему регистру 

$51 = шо _strtolower ($str1l, 'ОТЕ-8'); 

$52 = шо _strtolower ($5012, 'ОТЕ-8'); 

// Сравниваем 

var_dump( вексшр(551, 552) ); // іле(0) 


С strcoll(<Crpokal>, <Строка2>) — сравнивает строки на основе локализации. За- 
висит от регистра символов. Если локаль не настроена, то эта функция эквива- 
лентна функции strcmp (): 


// Кодировка файла windows-1251 
ѕеі1оса1е (1С ALL, "та КО", 'Russian Russia'); 
5зігі = "Строка1"; 

$str2 = "Строка2"; 

echo strcoll($strl, $str2); // -1 


Работает только с однобайтовыми кодировками; 


п strncmp (<Строка1>, <Строка2>, <Длина>) — сравнивает указанное число первых 
байтов строк. Зависит от регистра символов: 


// Кодировка файла windows-1251 
55Егі = "Строка1"; 

$str2 = "Строка2"; 

echo strncmp ($str1, $str2, 6); // 0 
echo strncmp ($strl, $str2, 7); // -1 


С substr compare () — сравнивает фрагмент строки $main str длиной $length, 
начиная со смещения $offset, со строкой $str. Если в параметре $сазе_ 
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insensitivity указано значение true, то сравнение будет ВЫПОЛНЯТЬСЯ без учета 
регистра символов. Работает только с однобайтовыми кодировками. Формат 
функции: 
substr сотраге (string $main_str, string $str, int $offset[, 
int $length[, bool $case_insensitivity=false]]) : int 
Пример: 
// Кодировка файла м1паом$-1251 
ѕеі1оса1е (1С АШ, "та КО", 'Russian Вазз1а'); 
5зігі = "Строка1"; 
$str2 = "строка2"; 
echo substr сопраге ($5џ1, $str2, 0, 6); // -1 
echo substr сошраге(5зегі, $str2, 0, 6, true); // 0 
echo substr compare ($strl, $str2, 0, 7, true); // -1 


5.7.14. Поиск в строке 


Для поиска в строке предусмотрены следуюшие функции: 


П mb вегров() — ищет подстроку в строке. Возвращает номер позиции, с которой 
начинается вхождение подстроки в строку. Если подстрока в строку не входит, 
ТО функция возвращает false. Функция зависит от регистра символов и имеет 
следующий формат: 
пр strpos (<Строка>, <Подстрока>[, 

<Начальная позиция поиска>[, <Кодировка>]]) 


Если начальная позиция не указана, то поиск будет осуществляться с начала 
строки: 


echo mb з%гроз ('Привет', "ри!, 0, 'ОТЕ-8'); // Выведет: 1 
шо internal епсоаіпо ('ОТЕ-8'); // Установка кодировки 
if (шо вегров("Привет", 'При') !== false) 


echo "Найдено"; // Выведет: Найдено 
15 cho "Не найдено"; 


П iconv strpos () — ищет подстроку в строке. Возвращает номер позиции, с KOTO- 
рой начинается вхождение подстроки в строку. Если подстрока в строку не вхо- 
дит, то функция возвращает false. Функция зависит от регистра символов. Если 
начальная позиция не указана, то поиск будет производиться с начала строки. 
Формат функции: 


iconv_strpos (<Строка>, <Подстрока>[, 


<Начальная позиция поиска>[, <Кодировка>11) 
Примеры: 
echo ісопу вігров("Привет", "ри", 0, 'ОТЕ-8'); // Выведет: 1 
if (ісопу ѕіүроѕ ("Привет', "При", 0, 'UTF-8') !== false) 


echo "Найдено"; // Выведет: Найдено 
15 cho "Не найдено"; 
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С вегроз() — ищет подстроку в строке. Возвращает номер позиции, с которой 
начинается вхождение подстроки в строку. Если подстрока в строку не входит, 
то функция возвращает false. Функция зависит от регистра символов. По умол- 
чанию работает только с однобайтовыми кодировками. Формат функции: 


strpos (<Строка>, <Подстрока>[, <Начальная позиция поиска>]) 


Если начальная позиция не указана, то поиск будет проводиться с начала строки: 
// Кодировка файла windows-1251 
if (strpos ('Привет', "При!) !-- false) 

есһо "Найдено"; // Выведет: Найдено 


15 cho "Не найдено"; 


ВНИМАНИЕ! 


Если в файле php.ini директива mbstring.func overload равна 2 или 7, то функция 
вегров() будет полностью эквивалентна функции mb вегров(). Начиная с версии 7.2, 
механизм перегрузки функций объявлен устаревшим и не рекомендуется к использо- 
ванию. 


П mb вегіров() — ищет подстроку в строке. Возвращает номер позиции, с которой 
начинается вхождение подстроки в строку. Если подстрока в строку не входит, 
то функция возвращает false. В отличие от функции mb strpos (), не зависит от 
регистра символов. Формат функции: 


шо зігіроѕ (<Строка>, <Подстрока>[, 
<Начальная позиция поиска>[, <Кодировка>11) 


Если начальная позиция не указана, то поиск будет производиться с начала 
строки: 


echo mb зегіроз("Привет"!, "РИ", 0, 'ОТЕ-8'); // Выведет: 1 
mb 1пеегпа1 епсоаіпо ('ОТЕ-8'); // Установка кодировки 
echo тр вегіров("Привет", "РИ"); // Выведет: 1 
o ѕігіроѕ() — ищет подстроку в строке. Возвращает номер позиции, с которой 


начинается вхождение подстроки в строку. Если подстрока в строку не входит, 
то функция возвращает false. В отличие от функции зегров(), не зависит от 
регистра символов. По умолчанию работает только с однобайтовыми кодиров- 
ками. Формат функции: 


ѕігіроѕ (<Строка>, <Подстрока>[, <Начальная позиция поиска>]) 
Пример: 


// Кодировка файла windows-1251 
ѕеі1оса1е (1С ALL, "та КО", 'Russian Вазз1а'); 
echo вігіроз("Привет", "РИ", 0); // Выведет: 1 


ВНИМАНИЕ! 


Если в файле php.ini директива mbstring.func overload равна 2 или 7, то функция 
вегіров() будет полностью эквивалентна функции mb stripos(). Начиная с версии 7.2, 
механизм перегрузки функций объявлен устаревшим и не рекомендуется к использо- 
ванию. 
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П mb_strrpos() — ищет подстроку в строке. Возвращает позицию последнего 
вхождения подстроки в строку. Если подстрока в строку не входит, то функция 
возвращает false. Функция зависит от регистра символов. Формат функции: 


пр ѕігүгроѕ (<Строка>, <Подстрока>[, 
<Начальная позиция поиска>[, <Кодировка>11) 


Пример: 
echo шо зіггроѕ ("ерпарверпр', "ер", 0, 'ОТЕ-8'); // 6 


п ісопу ѕіггроѕ() — ищет подстроку в строке. Возвращает позицию последнего 
вхождения подстроки в строку. Если подстрока в строку не входит, то функция 
возвращает false. Функция зависит от регистра символов. Формат функции: 


ісопу ѕіггроѕ (<Строка>, <Подстрока>[, <Кодировка>]) 


Пример: 
echo iconv зіггроз ('ерпарверпр', "ер", 'ОТЕ-8'); // 6 
o mb_strripos () — ищет подстроку в строке. Возвращает позицию последнего 


вхождения подстроки в строку. Если подстрока в строку не входит, то функция 
возвращает false. В отличие от функции mb зеггров(), не зависит от регистра 
символов. Формат функции: 


пр зЕгг1роз (<Строка>, <Подстрока> [, 
<Начальная позиция поиска>[, <Кодировка>11) 


Пример: 


echo шо зекгіроз("ерпарверпр", "ЕР", 0, 'ОТЕ-8'); // 6 


П mb_substr_count () — возвращает число вхождений подстроки в строку. Функция 
зависит от регистра символов. Формат функции: 
mb substr соппе(<Строка>, <Подстрока>[, <Кодировка>]) 
Пример: 


echo mb substr count ('epnaepnp', "ер", 'ОТЕ-8'); // 2 


5.7.15. Замена в строке 


Для замены в строке предназначены следующие функции: 


С сес гер1асе() — заменяет все вхождения подстроки в строке на другую под- 
строку и возвращает результат в виде новой строки (или массива). Функция не 
изменяет исходную строку и зависит от регистра символов. Формат функции: 


str_replace (<Подстрока для замены>, <Новая подстрока>, 

<Строка>[, <Число произведенных замен>]) 
Если в необязательном четвертом параметре указать переменную, то в ней будет 
сохранено число проведенных замен: 


$str = "Привет, Петя"; 
$count = 0; 
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55р = вес гер1асе ("Петя', "Вася", $str, $count); 


echo $56; // Выведет: Привет, Вася 
echo $count; // Выведет: 1 


В качестве параметра можно также передать массив: 


$arr = аггау ('!', '@', "ы, KOT 191, Ат: ты; тег” 
т ы” т Р керт, "21; туе 


echo зЕг геріасе(багк, '', "Текст 1!@#$%^&*() +=. текст"); 


// Выведет: Текст текст 


П егіт(<Строка>І, <Символы>]) — удаляет пробельные (или указанные во втором 
параметре) символы в начале и конце строки. Пробельными символами счита- 
ются: пробел, символ перевода строки (а), символ возврата каретки (хх), симво- 
лы горизонтальной (\t) и вертикальной (Ху) табуляции и нулевой символ (\0): 


$str = " Строка "; 
$str = trim($str); 
echo "'$str'"; // Выведет: "Строка" 
echo trim($str, " aC"); // Выведет: трок 
П ltrim(<Crpoka>[, <Символы>1) — удаляет пробельные (или указанные во втором 
параметре) символы в начале строки: 
$str = " Строка '; 
$str = ltrim($str); 
echo "'$str'"; // Выведет: "Строка ' 
echo ltrim($str, " ас"); // Выведет: трока 
П rtrim(<Crpoka>[, <Символы>1) — удаляет пробельные (или указанные во втором 
параметре) символы в конце строки: 
$str = " Строка "; 
$str = rtrim($str); 
echo "'$str'"; // Выведет: " Строка" 
echo rtrim($str, " aC"); // Выведет: Строк 
С сһор(<Строка>[, <Символы>]) -- удаляет пробельные (или указанные во втором 
параметре) символы в конце строки: 
$str = " Строка "; 
$str = chop ($str); 
echo "'$str'"; // Выведет: ' Строка" 
echo chop ($str, " aC"); // Выведет: Строк 
С strip tags (<Строка>[, <Теги>1) — удаляет из строки Bce HTML- и РНР-теги, за 


исключением указанных во втором параметре: 


$str = "<зрап style="color: геа"><р>Строка</р></зрап>'; 
5вегі = strip tags ($str); 

5вЕг2 = strip tags ($str, "<Б>"); 

echo 55ег1; // Выведет: Строка 

echo $str2; // Выведет: <р>Строка</р> 
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Следует заметить, что функция strip tags () работает не совсем корректно. Если 
в строке встретится открывающая угловая скобка (<), а за ней сразу другой сим- 
вол, то будет удален весь фрагмент от скобки до конца строки: 


$str = '5<10 Эта строка будет удалена!"; 
echo strip _ tags ($str); // Выведет: 5 


С addslashes () — добавляет обратную косую черту для защиты специальных CHM- 
ВОЛОВ: 
$str = '"Волга", "Москвич", "Жигули""; 
$str = addslashes ($str); 


echo $str; // Выведет: \"Волга\", \"Москвич\", \"Жигули\" 


С stripslashes () — удаляет символы обратной косой черты: 


$str '\\"Волга\\", \\"Москвич\\", \\"Жигули\\"!; 
$str = stripslashes ($str); 


echo $str; // Выведет: "Волга", "Москвич", "Жигули" 


П htmlspecialchars () -- заменяет специальные символы их НТМГ-эквивалентами. 
Формат функции: 


htmlspecialchars (string $string, 
int $ flags=ENT_COMPAT | ENT НТМІ401, 
string $encoding=ini_get ('default_charset'), 


Боо1 Ş$double_encode=true) : string 


Необязательный параметр $flags задает режим преобразования двойных и оди- 
нарных кавычек. Может принимать следующие значения (или их комбинацию): 


ІІ 


Т СОМРАТ — преобразуются только двойные кавычки (значение по умолча- 
нию); 


® ENT QUOTES — преобразуются И двойные, и одинарные кавычки; 


% ЕМТ NOQUOTES — двойные и одинарные кавычки не заменяются; 


® БМТ IGNORE отбрасывает некорректные кодовые последовательности (не 
рекомендуется использовать это значение в целях безопасности); 


e ЕМТ ЗОВУТТТОТЕ — заменяет некорректные кодовые последовательности CHM- 
ВОЛОМ \u{FFFD} в случае применения ОТЕ-8 или &#xFFFD; при использовании 
другой кодировки; 


e ENT НТМІ401-- обрабатывает код по правилам HTML 4.01 (значение по умол- 
чанию); 


® ENT НТМІ5-- обрабатывает код по правилам HTML 5; 


e ENT XML1 — обрабатывает код по правилам XML 1; 


® ENT_XHTML — обрабатывает код по правилам XHTML. 


В необязательном параметре $епсод1та можно указать кодировку. В PHP 7 по 
умолчанию используется значение директивы default_charset. В предыдущих 
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версиях значение по умолчанию часто менялось, поэтому кодировку лучше 
всегда указывать явным образом. 


Если в необязательном параметре $double encode указано значение false, ТО 
существующие в строке НТМГ-эквиваленты повторно преобразовываться не 


"ОТЕ-8'); 


ЕМТ СОМРАТ | ЕМТ НТМІ5, 


с;Москвичвацове; &amp; quot; 


htmlspecialchars ($str, ЕМТ СОМРАТ | ЕМТ НТМІ5, ОТЕ-8', false); 


будут: 

$str = ""Волга", "Москвич" &quot;'; 
5зіг2 = htmlspecialchars ($str, 

echo $str2; 

// &quot;Bonra&quot;, &quo 

бзік = 

echo $56; 


// &quot;Bonrasquot;, &quo 


С помощью функции html 


преобразование: 


$str 


$5 Ер = 


echo 


' &quot; Bonra&quot; 


t;MockBnuáquot; &quot; 


| зрес1а1спагз десоде () МОЖНО ВЫПОЛНИТЬ обратное 


‚ &quot;Mockenusquot; "; 


htmlspecialchars_decode ($str, 


$str; // "Волга", "Москвич" 


ЕМТ СОМРАТ | ЕМТ НТМІ5); 


Увидеть таблицу замен позволяет функция get_html_translation table (): 


print к( 
get_html_translation table ( 
HTML SPECIALCHARS, ENT COMPAT | ЕМТ НТМІ5) 
); 
П htmlentities() — позволяет заменить все возможные специальные символы их 


НТМІ -эквивалентами: 


55 
55 


ес 
55 


ес 


= 


Е. = 


т) 


Ег2 = htmlspecialchars ($36, 


"ОТЕ-8'); 


htmlentities ($str, 


"ОТЕ- 
һо $str; // &quot;&amp; &1раг; &грак; 


һо $str2; // &quot;&amp; () 


ЕМТ СОМРАТ 
8"); 


ЕМТ СОМРАТ | ЕМТ НТМІ5, 


| ЕМТ НТМІ5, 


С помощью функции html entity decode () можно выполнить обратное преобра- 
зование: 


SSE -= 
$str 


'&quot; &amp; &lpar; 


html entity decode ($str, 


есһо Sstr // "(0 


«граг;"; 


ЕМТ СОМРАТ | ЕМТ НТМІ5, "ОТЕ-8"); 


Увидеть таблицу замен позволяет функция get_html_translation table (): 


print r( 


get_html_translation table ( 


HTML ENTITIES, ЕМТ COMPAT | 


ЕМТ НТМІ5) 
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П wordwrap() — позволяет разбить длинный текст на строки длины $width. Формат 
функции: 
wordwrap (string $str, int $width=75[, string $Бгеак="\п" [, 
bool $cut=false]]) : string 


Если в параметре $cut указано значение true, То значение параметра $width 
задает фиксированную длину в байтах. В этом случае функция будет корректно 
работать только с однобайтовыми кодировками: 


$str = "Очень длинная строка перед выводом"; 
echo могамгар ($str, 7, "<фг>"); 
// Очень<рг>длинная<рг>строка<рг>перед<рг>выводом 


П nl2br() — добавляет перед всеми символами новой строки (\n) Ter <br />: 


$str = "Очень \пдлинная\пстрока\пперед\пвыводом"; 
echo n1l2br ($str); 


Исходный НТМГ-код будет выглядеть следующим образом: 


Очень<рг /> 
длинная<рг /> 
строка<рг /> 
перед<рг /> 
выводом 


Если во втором параметре указать значение false, то будет добавляться тег <br>: 


$str = "Строка1\пСтрока2"; 
echo n1l2br($str, false); 


Исходный НТМІ.-код будет выглядеть следующим образом: 


Строка1<рг> 
Строка2 


5.7.16. Преобразование строки в массив и обратно 


Преобразовать строку в массив и обратно позволяют следующие функции: 


С ехріоде() — разделяет строку $string на подстроки по указанному разделителю 
$delimiter и добавляет полученные подстроки в массив. Формат функции: 
explode (string $delimiter, string $string[, int $limit]) : array 
Пример: 
$str = "A\tB\tC\tD"; 

Ѕагг = explode ("\і", $str); 


print_r ($arr); 
// Акгау ( [0] => А [1] => В [2] => С [3] => р) 


В необязательном параметре $11и1Е можно указать максимальное количество 
элементов в итоговом массиве: 
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print_r( ехріоде(";", "А;В;С;О", 2) ); 
// Array ( [0] => А [1] => В;С ) 


Если в параметре $1116 задано отрицательное значение, то будут возвращены 
все подстроки, кроме последних, в количестве -$limit: 

print_r( explode (";", "A;B;C;D", -2) ); 

// Array ( [0] => A [1] => B ) 


С preg_split() -- разбивает строку по шаблону регулярного выражения и возвра- 
щает массив подстрок. Если не требуется указания шаблона, то вместо функции 
ргед ѕр1і+ () лучше использовать функцию ехріоде(): 


$str = "А\ЕВ\ЕС\Е\Е \ар"; 

$arr = preg_split('/\s+/u', $str); 

print_r ($arr); 

// Array ( [0] => A [1] => B [2] => С [3] => р) 


ПРИМЕЧАНИЕ 
Регулярные выражения подробно рассматриваются в разд. 5.8. 


С :пр1оае() — преобразует массив в строку. Элементы добавляются через указан- 
ный разделитель: 


Ѕагг = аггау(1, 2, 3, 4, 5); 


$str = implode(', ", $агг); 
echo $str; // 1, 2, 3, 4, 5 
$str = ішріосде(" - ", Ѕагг); 


echo $str; //1-2-3-4-5 


П join() — полностью аналогична функции implode (). 


5.7.17. Кодирование и шифрование строк 


Выполнить кодирование и шифрование строк позволяют следующие функции: 


O urlencode () — выполняет ОВГ-кодирование строки. Это необходимо, например, 
для передачи русского текста в строке ОКГ-адреса в качестве параметра сце- 
нария: 
$str = "Текст "; 
echo urlencode ($str); 

// %00%42%00%В5%00%ВА%01%81%01%82+ 


П urldecode() — раскодирует строку, закодированную с помощью функции 
urlencode (): 
$str = "%р05А2%р0%В5%00%5ВА%501%81%01%82-"; 


echo """, urldecode ($str), "'"; // "Текст" 


Кроме этих функций, можно использовать функции rawurlencode() и 


rawurldecode (): 
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$str = "Текст "; 

$str = rawurlencode ($36); 

echo $56; 

// %D0%A2%D0%B5%D0%BA%D1%81%D1%82%20 

echo "'", rawurldecode ($str), "'"; // "Текст" 


ВНИМАНИЕ! 
Символ пробела заменяется не знаком +, а символами $20. 


С mb encode mimeheader () позволяет закодировать текст с помощью методов 
Base64 ИЛИ Quoted-Printable. Формат функции: 


mb encode тітеһеадег (<Строка>[, <Кодировка>[, 


<Метод кодирования>[, <Символ перевода строк>[, <Отступ>]]]]) 


Если параметр <Кодировка> не указан, то берется значение, указанное в функции 
mb internal encoding (). Как показывает практика, указывать кодировку в функ- 
ЦИИ по іпбсегпа1і епсой4іпа() нужно обязательно. Параметр <Метод кодирования> 
может принимать значения В (Base64) или о (Quoted-Printable). Если параметр не 
указан, то используется значение в. Параметр <Символ перевода строк> задает 
символ для разделения строк. По умолчанию предполагается комбинация \r\n. 


Функция mb decode шішеһеадег(<Строка>) позволяет выполнить обратную ONC- 
рацию. 


Пример: 


пр іпбсекпаі епсоаіпо ("ОТЕ-8'); 

$theme = "Сообшение"; 

Ştheme = mb_encode_mimeheader ($theme) ; 

echo $theme; 

// Выведет: =?ОТЕ-8?В?О0КНОУЕС+0ТНВ19С101309МС1 ?= 
echo mb decode_mimeheader ($theme) ; 

// Выведет: Сообщение 


Можно также воспользоваться функцией iconv mime епсоде () для кодирования 
строки и iconv тіте десоде () — для раскодирования: 


Ѕагг = аггау ( 
"ѕсһете' => "В", 
'input-charset' => 'ОТЕ-8', 
'output-charset' => 'ОТЕ-8', 
'line-length' => 76, 
"1іпе-ргеак-сһакѕ' => "\ү\п" 

); 

$theme = "Сообшение"; 


$theme = iconv mime encode ('Subject', $theme, $агг); 
echo $theme; 

// Subject: =?UTF-8?B?0KHQvtC+0LHRidC10L3QUNC1?= 
echo iconv mime decode ($theme, 0, 'UTF-8'); 

// Subject: Сообщение 
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O па5() — кодирует строку по алгоритму МО5. Часто используется для шифрова- 
ния паролей. Для сравнения введенного пользователем пароля с сохраненным 
в базе необходимо зашифровать введенный пароль, а затем выполнить срав- 
нение: 


Ѕраѕѕи = "'раззмога'; 
$hash = md5 ($раззм); // Пароль, сохраненный в базе 
echo бһавһ; // Выведет: 5#4ассЗр5баа7 65461483274ер882сғ#99 


$passw2 = 'раззмога!; // Пароль, введенный пользователем 
if ($hash === md5 ($раѕѕм2)) echo "Пароль правильный"; 

O ѕһа1 () — шифрует строку: 
$passw = "'раззмога'; 


$hash = ѕһа1 ($раѕѕи); // Пароль, сохраненный в базе 
echo $hash; // 5baa6le4c9b93f3f0682250b6cf8331b7ee68fd8 


$passw2 = 'password'; // Пароль, введенный пользователем 
if ($hash === shal ($раѕѕм2)) echo "Пароль правильный"; 
С password вазв() — шифрует пароль. Формат функции: 


password_hash (string $раѕѕмога, integer $а1до[, 
array $options]) : string 


B первом параметре указывается пароль, во втором — алгоритм шифрования 
(PASSWORD БЕҒАОІТ ИЛИ PASSWORD ВСВУРТ), а в третьем — массив с дополнитель- 
ными параметрами. 


Для сравнения паролей используется функция password уех1Еу(). Формат функ- 
ции: 


раззмога уег1Еу(5Ех1п9 $раззмога, string $hash) : boolean 
Пример: 
Ѕраѕѕи = 'password'; 


// Пароль, сохраненный в базе 

бһавһ = password_hash ($раззи, PASSWORD DEFAULT) ; 

$passw2 = 'password'; // Пароль, введенный пользователем 
if (password уег1Еу($раззм2, $һазһ)) 


echo "Пароль правильный"; 


5.7.18. Форматирование строки 


Для форматированного вывода предназначена функция ргіпеғ (). Формат функции: 
printf (string $format[, mixed $args[, mixed 5...11) : int 

В параметре $format указывается строка специального формата, внутри которой 
с ПОМОЩЬЮ спецификаторов задаются правила форматирования. В параметре $args 


через запятую указываются различные значения. Функция возврашает длину BbIBO- 
димой строки: 


printf ('%.2f', 10.5125484); // 10.51 
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Если мы не хотим сразу выводить результат, а собираемся сохранить его в виде 
строки, то следует воспользоваться функцией sprintf (). Формат функции: 


sprintf (string $format[, mixed $агаз[, mixed $...]]) : string 
Пример: 


$str = sprintf ('%.2f', 10.5125484); 
echo $str; // 10.51 


Обратите внимание: при работе функций printf() и sprintf () с многобайтовыми 
кодировками при указании максимальной ширины области можно получить не- 
ожиданный результат. Кроме того, результат выполнения зависит от локали. Если 
локаль не указана, то используется локаль по умолчанию. От настроек локали, 
например, зависит отображение десятичного разделителя вещественных чисел: 


ѕеі1оса1е (1С АШ, "ка КО", 'Russian Вазз1а'); 
ргіпіЁ ("%.2#', 10.5125484); ИУ 105 


Для форматирования данных, содержащихся в массиве, предназначены функции 
үргіпеЕ() И vsprintf (). Форматы функций: 


vprintf (string $format, array $args) : int 
vsprintf (string $format, array $args) : string 
Пример: 

ургіпіЕЁ ("%.2#\п", [ 10.5125484 1); // 10.51 
5зіг = vsprintf("%.2f\n", [ 10.5125484 1); 


echo $str; // 10.51 


В параметре $format задается строка специального формата, внутри которой могут 
быть указаны спецификаторы, имеющие следующий формат: 


$ [<Индекс>] [<Флаги>] [<Ширина>] [.<Точность>]<Тип преобразования» 


В параметре $format можно вообще не указывать спецификаторы. В этом случае 
значения в параметре $args не задаются: 


ргіпЕеЕ( "Просто строка"); // Просто строка 


Если используется только один спецификатор, то параметр $args может содержать 
одно значение, в противном случае необходимо привести значения через запятую. 
Если количество значений не совпадает с количеством спецификаторов, то будет 
выведено сообшение об ошибке. 


Вот пример указания двух спецификаторов и двух значений: 
printf ('%d %s', 10, 'руб.'); // 10 руб. 


В этом примере строка содержит сразу два спецификатора: за и 3s. Спецификатор 
за предназначен для вывода целого числа, а спецификатор зѕ — для вывода строки. 
Вместо спецификатора за будет подставлено число 10, а вместо спецификатора 
*з — строка руб. Обратите внимание: тип данных переданных значений должен 
совпадать с типом спецификатора. Если в качестве значения для спецификатора %а 
указать строку, то будет выполнено преобразование типов, и мы получим число о. 
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По умолчанию первому спецификатору соответствует первое значение, второму 
спецификатору — второе значение и т. д. Параметр <Индекс> позволяет изменить 
этот порядок и указать индекс значения. Обратите внимание на то, что индексы 
нумеруются с 1, а не с нуля. После индекса указывается символ $: 


printf ('%255 %1$а руб.', 10, "цена"); // цена 10 руб. 

Кроме того, один индекс можно указать несколько раз: 

printf ('%1$d %1$а', 10); // 10 10 

Обратите внимание: символ $ внутри двойных кавычек является специальным. 


Лучше использовать апострофы, в противном случае нужно экранировать этот 
СИМВОЛ обратным слешем: 


printf ("31\$d %1\$а", 10); // 10 10 
В параметре <Тип преобразования> могут быть указаны следующие символы: 
С с — указанное число трактуется как АЗСП-код символа: 

printf ('%c', 81); //Q 


С s— строка (или любой другой тип, который автоматически будет преобразован 
в строку): 


ргіпіЁ ('%5 %5 %5', "строка", 10, 5.33); 
// строка 10 5.33 


O ь — двоичное число: 
printf ('%b', 119); // 1110111 


O а — десятичное целое число со знаком: 
printf sd %а', 10, -5); // 10 -5 


С о — восьмеричное число: 


printf ('%0 %о", 10, 077); 2 Т7 


O x— шестнадцатеричное число в нижнем регистре: 


printf ("%х %х', 10, 255); // а ЕЕ 


O х— шестнадцатеричное число в верхнем регистре: 


ргіпіЁ ('"%Х %Х', 10, 255); // А ЕЕ 
О ғ — вещественное число в десятичном представлении: 


printf ("%f %Е\п", 18.65781452, 12.5); 

// 18.657815 12.500000 

printf ("%f\n", -18.65781452); // -18.657815 
Е(7%.0Ғ %.2Е', 100.0, 100.0); // 100 100.00 


до 


О г— вещественное число в десятичном представлении (не зависит от локали): 


printf ("%F $Е\п", 18.65781452, 12.5); 
// 18.657815 12.500000 
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printf ("%F\n", -18.65781452); // -18.657815 
$.0Е %.2Е', 100.0, 100.0); // 100 100.00 


П е — вещественное число в экспоненциальной форме (буква е в нижнем регистре): 


"Зелп", 18657.81452); // 1.865781е+4 


printf ("$ 
%e', 0.000081452); // 8.145200e-5 


PRINCEN 


П Е — вещественное число в экспоненциальной форме (буква е в верхнем регистре): 


ргіпіЁ ('%Е', 18657.81452); // 1.865781Е+4 


П ч — эквивалентно ғ или е (выбирается более короткая запись числа): 


ргіпЕҒ(7%4 $9 %g', 0.086578, 0.000086578, 1.865Е-005); 
// 0.086578 8.6578е-5 1.865е-5 


П с — эквивалентно ғ или Е (выбирается более короткая запись числа): 


printf ('%G %С %6', 0.086578, 0.000086578, 1.865Е-005); 
// 0.086578 8.6578Е-5 1.865Е-5 


С + — символ процента (%): 

ргіпЕЕ(!10%%"); // 10% 
Параметр <Ширина> задает минимальную ширину поля. Если строка меньше шири- 
ны поля, то она дополняется пробелами. Если строка не помещается в указанную 
ширину, то значение игнорируется и строка выводится полностью: 


ргіпек("!%35!"", '56г1па'); // string‘ 
printf ("31057 "Ета JA string' 


Задать минимальную ширину можно не только для строк, но и для других типов: 


ргіпеЕ(""%100"", 25); у: 25' 
ргіпек("!"%10Ғ"", 12.5); // ' 12.500000' 


По умолчанию выравнивание производится по правой границе области. Если перед 
шириной указать флаг -, то будет выполнено выравнивание по левой границе об- 
ласти: 

ргіпЕЕ("!%105!", "5Ег14та'); //' string' 

printf ("'%-10s'", 'string'); // 'string ' 


Параметр <Точность> Задает количество знаков после точки для вещественных 
чисел. Перед этим параметром обязательно должна стоять точка: 


ргіпеЕ("!"%10.5Ғ"", 3.14159265359); //' 3.14159' 
printf ("'%.3f'", 3.14159265359); // '3.142' 


Если параметр <точность> используется применительно к строке, то он задает 
максимальное количество байтов. Символы, которые не помещаются, будут от- 
брошены: 


printf ("'%5.75'", "Hello, мог1а!"); // ‘Hello, ' 
printf ("'315.20s'", "Hello, world!"); // ' Hello, world!' 
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ВНИМАНИЕ! 


При работе с многобайтовыми кодировками будут проблемы, т. к. параметр <точность> 
задает число байтов, а не символов. 


В параметре <Флаги> могут быть указаны следующие символы или их комбинация: 


O о— задает наличие ведущих нулей для числового значения: 


printf ("'%74'", 100); //' 100' 
ргіпеЕ(""%07а"", 100); // '0000100' 
С - — задает выравнивание по левой границе области. По умолчанию использует- 
ся выравнивание по правой границе: 
printf ("isdn Э5-5а!";, Зи" 3" 3 " 
ргіпеЕ(""%050"", 3); // '00003' 


О + — обязательный вывод знака, как для отрицательных, так и для положитель- 
ных чисел: 


printf ("'8+d' "ға", -3, 3); // '-3' сәз" 


С "символ — задает символ-заполнитель. По умолчанию используется пробел: 


printf ("'%7а'\п", 100); ТАЗЫ 100!" 
рглоёЕ("'%'.7а'\п", 100); И T agen 007 
printf ("'%'_7d'\n", 100); // 52100" 
PRINCE" S TOJA N 100); // 80000100" 


Bce результаты, которые были показаны в приведенных примерах, справедливы 
для следующих настроек локали: 
echo зеЕ1оса1е (1С ALL, '0'); 


// 1С СОШАТЕ=С;1С СТУРЕ=Ва$$1ап Russia.1251; 
// LC МОМЕТАВУ=С;ЬС МОМЕВТС=С; С ТІМЕ-С 


Если изменить локаль, то и результат будет соответствовать настройкам указанной 
локали. В частности, от локали зависит символ десятичного разделителя: 


printf ("%.2f\n", 10.5125484); 71/1051 
ѕеі1оса1е (1С ALL, "та КО", 'Russian Вазз1а'); 
релпЕЕ('%.2Е', 10.5125484); // 10,51 


Для форматирования чисел можно также воспользоваться функцией number 
format (), которую мы уже рассмотрели в разд. 5.5.6: 


5х = 1234567.126; 

echo number _ format ($x), "Ап"; // 1,234,567 
echo number _ format ($x, 2), "Ап"; // 1,234,567.13 
echo number format ($x, 2, ',', ''); // 1 234 567,13 
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5.8. Регулярные выражения РСКЕ 


Регулярные выражения позволяют осушествить в строке сложный поиск или заме- 
ну. В языке РНР существуют два формата регулярных выражений: POSIX и 
РСКЕ (Регі-сотрайМе Regular Expression, Регі-совместимые регулярные выраже- 
ния). Синтаксис их схож, но скорость и внутренний механизм работы сильно раз- 
личаются. В РНР 7 функции, которые позволяют использовать регулярные выраже- 
ния формата POSIX, удалены. Тем не менее функции с префиксом mb егес все еще 
позволяют использовать формат POSIX, но мы их рассматривать не будем, т. к. для 
работы с кодировкой ОТЕ-8, а также с однобайтовыми кодировками лучше исполь- 
зовать РСКЕ. 


5.8.1. Создание шаблона 


Шаблон РСВЕ представляет собой строку, заключенную в кавычки или апострофы, 
внутри которой между двумя ограничителями указывается регулярное выражение. 
За последним ограничителем могут быть указаны модификаторы. В качестве огра- 
ничителя могут выступать одинаковые символы или парные скобки: 


'/<Регулярное выражение>/ [<Модификаторы>] ' 
'#<Регулярное выражение>#+ [<Модификаторы>] ' 
'"<Регулярное выражение>" (<Модификаторы>1! 
"{<Регулярное выражение>) |<Модификаторы>1! 
] 


"(<Регулярное выражение>) [<Модификаторы>] ' 


В параметре <модификаторы> могут быть указаны следующие флаги (или их комби- 
нация): 


П і — поиск без учета регистра: 


var дӘлпр( ргед пағсҺ("/абв/а", 'аБв') ); // іп (0) 
маг Әлпр( ргед таїсћ ('/абв/іц', 'аБв') ); // int(1) 


О п— поиск в строке, состоящей из нескольких строк, разделенных символом но- 
ВОЙ строки. Символ ^ соответствует привязке к началу каждой подстроки, а сим- 
вол $ соответствует позиции перед символом перевода строки. Метасимвол 
«точка» соответствует любому символу, кроме символа перевода строки Са); 


О з — метасимвол «точка» соответствует любому символу, в том числе и символу 
перевода строки: 


var аџотр( preg_match('/^.+$/u', "а\пв") ); // int(0) 
уаг аџотр( preg_match('/^.+$/su', "а\пв") ); // 116 (1) 


O x— разрешает использовать в регулярном выражении пробельные СИМВОЛЫ 
и однострочные комментарии, начинающиеся с символа #; 


С о— ограничивает «жадность» всех квантификаторов в шаблоне. Обратите вни- 
мание на регистр модификатора — буква должна быть прописной; 


С u— служит для обработки строк в кодировке ОТЕ-8. Регистр модификатора u 
имеет значение. Так как мы работаем с кодировкой ОТЕ-8, то этот модификатор 
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обязательно должен присутствовать. В качестве примера удалим из строки все 
русские буквы: 


$str = 'строка1строка2Строка3'; 
cho preg_replace ('/[a-aë]/iu', '', $str); // 123 


Если в этом примере модификатор u не указать, то будет удален один байт из 
каждого двухбайтового символа и в итоге в строке появятся квадратики или зна- 
ки вопроса. 


ПРИМЕЧАНИЕ 


Сушествует также другие модификаторы, которые используются очень редко. Полный 
их список смотрите в документации. 


Модификаторы можно установить или сбросить внутри шаблона регулярного вы- 
ражения с помощью следующих конструкций: 


С (?imsxUXJ-imsxUXJ) — позволяет установить или сбросить (если буква указана 
после знака -) модификаторы внутри регулярного выражения. Буквы соответст- 
вуют модификаторам в шаблоне. 


Вот пример установки модификаторов: 


мак аштр ( preg_match('/^[a-aë]+$/u', "АБВЕ") ); // іле(0) 
var дшпр( ргед таёсћ ('/ (21) ^[а-яё]+$/0', 'АБВЁ') ); // int(1) 
var_dump( preg_match('/^.+$/u', "а\пв") ); // int(0) 
var @лтр( preg_match('/(?s)^.+$/u', "а\пв") ); // 106 (1) 
С (эітпвхОХО-ітвх0Х7:шаблон) — позволяет установить или сбросить (если буква 


указана после знака -) модификаторы внутри регулярного выражения. В этом 
случае шаблон регулярного выражения располагается внутри круглых скобок 
после двоеточия, что позволяет установить или сбросить модификаторы только 
для фрагмента шаблона. 


Вот пример установки модификаторов: 


var @лтр( preg_match('/^[a-z]+ [а-2]+$/0', "АВС РЕЕ') ); 

// іпе(0) 

var бшшр( preg_match('/(?i:^[a-z]+) [а-2]+$/а', "АВС ОЕЕ') ); 
// int (0) 


var_dump (preg_match('/(?i:^[a-z]+) [а-2А-2]+$/а', "АВС DEF')); 
// int(1) 


var _ dump ( 
preg_match('/(?i:^[a-z]+) (?i:[a-z]+$)/u', "АВС DEF') ); 
// int (1) 


5.8.2. Синтаксис регулярных выражений 


Обычные символы, не имеюшие специального значения, могут присутствовать 
в строке шаблона, и они будут трактоваться как есть. Вот пример указания в шаб- 
лоне последовательности обычных символов: 


var Әшпр( ргед пағсҺ("/строка/а", "строка") ); // int(1) 
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Экранирование специальных символов 


Внутри регулярного выражения символы ., 7, *, +, ?, {, [, ], \, 1, (и), а также за- 
крывающий символ шаблона, имеют специальное значение. Если эти символы 
должны трактоваться как есть, то их следует экранировать с помощью слеша. Не- 
которые специальные символы теряют свое специальное значение, если их размес- 
тить внутри квадратных скобок. В этом случае экранировать их не нужно. Напри- 
мер, по умолчанию метасимвол «точка» соответствует любому символу, кроме 
символа перевода строки. Если необходимо найти именно точку, то перед ней 
нужно указать символ \ или разместить точку внутри квадратных скобок: [.]. Ipo- 
демонстрируем это на примере проверки правильности введенной даты (лис- 
тинг 5.22.) 


Листинг 5.22. Проверка правильности ввода даты 


<?php 
$str = "29,10.2017"; // Неправильная дата (вместо точки указана запятая) 


$pattern = !/7(0-3110-91.101110-91.1121109110-9110-915/6ш"; 
// Символ \ не указан перед точкой 


if (preg_match ($pattern, $str)) echo "Дата введена правильно"; 


else echo "Дата введена неправильно"; 


// Так как точка означает любой символ, выведет: Дата введена правильно 


$pattern = "/%(0-3110-91А.101110-91А.1121109110-91(0-915/ви”; 
// Символ \ указан перед точкой 


if (preg_match ($pattern, $str)) echo "Дата введена правильно"; 
else echo "Дата введена неправильно"; 
// Так как перед точкой указан символ \, 


// выведет: Дата введена неправильно 


$pattern = '/^[0-3] [0-9] [.] [01] [0-91 [.] [12] [09] [0-9] [0-9] $/su'; 
// Точка внутри квадратных скобок 


if (preg_match ($pattern, $str)) echo "Дата введена правильно"; 


else echo "Дата введена неправильно"; 


// Выведет: Дата введена неправильно 


Следует учитывать, что символ обратного слеша является специальным не только 
в шаблоне регулярного выражения, но и в строке. Если метасимвола нет, то можно 
указать только один символ обратного слеша: 


var Әшпр( preg_match('/\ /а', '\ ') ); // 10% (1) 
var_dump('/\ /u'); // вегіп( (5) "/\ /u" 
мас dump ('\ '); // вжгіпа (2) "\ " 


Однако если слеш расположен в самом конце строки, или за слешем идет метасим- 
ВОЛ ИЛИ закрывающий СИМВОЛ шаблона, то слеш нужно дополнительно экрани- 
ровать: 
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маг Әшпр( preg_match (' /\\\\/д", '\\') ); // int(1) 
var dump ('/\\\\/а'); // вегіпа (5) "/\\/а" 
var dump ('\\'); // вегіпа(1) "\" 


Посмотрите, сколько слешей добавилось! Чтобы не путаться, следует выводить 
строку с шаблоном на экран и смотреть, что получилось в итоге. Помните, что 
экранирование внутри шаблона должно быть видно при выводе. 


Давайте рассмотрим еще один пример. Нужно проверить, равна ли строка значе- 
нию '\з'. Внутри апострофов большинство специальных символов не преобразу- 
ются, поэтому в самой строке можно указать только один слеш, хотя лучше указать 
два: '\\з'. Внутри шаблона регулярного выражения эта комбинация символов 
является специальной и обозначает любые пробельные символы. Поэтому внутри 
шаблона мы должны добавить еще три слеша, чтобы экранировать специальную 
комбинацию: 


уаг аӢџотр ( preg_match ('/^\\\\5$/5а', "\\5') ); // іл%(1) 
var dump ('/^\\\\5$/51'); // вігіпа (9) "/^\\5$/5а" 
var dump ('\\5'); // вегіпа(2) "\з" 


Использовать ДЛЯ шаблонов етроки в двойных кавычках вообще не рекомендуется, 
т. к. в этом случае нам пришлось бы еще дополнительно экранировать символ $. 


Экранировать все специальные символы в строке позволяет функция ргед quote (). 
Формат функции: 
preg_quote (string $str[, string $delimiter]) : string 


В необязательном параметре $delimiter можно указать дополнительный символ, 
требующий экранирования, — например, закрывающий символ шаблона: 


FSET = M ЕЕ АА] СОМЫ 1 T 
cho preg_quote ($str, '/'); 
ДУ. ААА A ARNT РА ААС АМА 


Метасимволы 

Приведем метасимволы, применяемые в регулярных выражениях: 

п ^— привязка к началу строки (назначение зависит от модификатора m); 
п $ — привязка к концу строки (назначение зависит от модификатора т); 

С \л — привязка к началу строки (не зависит от модификатора); 

С \2 — привязка к концу строки (не зависит от модификатора); 

п [] — позволяет указать символы, которые могут встречаться на этом месте 
в строке. Можно записать символы подряд или указать диапазон через тире; 


О [^] — позволяет указать символы, которые не могут встречаться на этом месте 
в строке. Можно записать символы подряд или указать диапазон через тире; 


O па — соответствует одному из символов п ИЛИ m; 
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С . (точка) — любой символ, кроме символа перевода строки (Ха). Если указан 
модификатор 5, то метасимвол «точка» соответствует всем символам, включая 
символ перевода строки. Внутри квадратных скобок точка не имеет специаль- 
ного значения. 


Привязку к началу и концу строки следует использовать, если строка должна пол- 
ностью соответствовать регулярному выражению. Например, проверим, содержит 
ли строка только число: 


$pattern = '/^[0-9]+5/0"; 

ӛзіг- 726; 

if (preg match ($pattern, $str)) echo "Число"; // Выведет: Число 
else echo "Не число"; 

$str = "Строка2"; 

if (preg _ match ($pattern, $str)) echo "Число"; 

else echo "Не число"; // Выведет: Не число 


Если привязку не указать, то любая строка, содержашая число, пройдет проверку: 


$pattern = '/[0-9]+/и'; 

$str = "Строка2"; 

if (preg match ($pattern, $str)) echo "Число"; // Выведет: Число 
else echo "Не число"; 


Можно указать привязку только к началу или только к концу строки: 


$pattern = '/[0-9]+$/u'; 
$str = "Строка2"; 


if (preg_match ($pattern, $str)) echo "Есть число в конце строки"; 
else echo "Нет числа в конце строки"; 


// Выведет: Есть число в конце строки 
$pattern = '/^[0-9]+/u'; 
if (preg_match ($pattern, $str)) echo "Есть число в начале строки"; 


else echo "Нет числа в начале строки"; 
// Выведет: Нет числа в начале строки 


По умолчанию используется однострочный режим. Например, не указав привязку 
к началу и концу, в этом примере мы получим все три числа: 

$pattern = '/[0-9]+/ц"; 

$str = "10\n20\n30"; 

$arr = array(); 

preg_match_all ($pattern, $str, $arr); 

print_r ($arr); 

// Array ( [0] => Array ( [0] => 10 [1] => 20 [2] => 30) ) 


Если мы первую инструкцию изменим следуюшим образом: 
$pattern = '/^[0-9]+$/и'; 


то не будет найдено ни одного соответствия, т. к. указана привязка к концу и на- 
чалу строки. Однако если указан модификатор т, то поиск производится в строке, 
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состоящей из нескольких подстрок, разделенных символом НОВОЙ етроки. В этом 
случае символ ^ соответствует привязке к началу каждой подстроки, а символ $ со- 
ответствует позиции перед символом перевода строки: 


$pattern = '/^[0-9]+$/mu'"; 

$str = "10\n20\n30"; 

$arr = аггау(); 

preg_match_all ($pattern, 5зік, багк); 

ргіпе к(багк); 

// Array ( [0] => Array ( [0] => 10 [1] => 20 [2] => 30) ) 


Хотя мы и указали привязку, все равно получим все числа, т. к. привязка действует 
к началу и концу каждой отдельной подстроки. 


Чтобы в режиме т работала привязка к началу и концу всей строки, необходимо 
использовать метасимволы \A и \2: 


$pattern = '/\\А[0-9]+\\2/щтоа'; 
В квадратных скобках [] можно указать символы, которые могут встречаться на 


этом месте в строке. Можно записать символы подряд или указать диапазон через 
тире: 


О [09] — соответствует числу 0 или 9; 

С [0-9] — соответствует любому числу от 0 до 9; 

С [абв] — соответствует буквам а, би в; 

О [а-г] — соответствует буквам а, б, ви г; 

С [a-aë] — соответствует любой букве от а до я; 

О [ABB] — соответствует буквам A, B H B; 

С [A-AË] — соответствует любой букве от A до я; 

O (а-ял-я881 — соответствует любой русской букве в любом регистре; 

С [0-9а-яА-яёБа-гА-2] — любая цифра и любая русская или английская буква He- 


зависимо от регистра. 


ВНИМАНИЕ! 
Буква & не входит в диапазон [а-я]. 


Значение можно инвертировать, если после первой скобки указать символ ^. Таким 
способом можно указать символы, которых не должно быть на этом месте в строке: 
С [709] — не цифра 0 или 9; 

O [70-91 — не цифра от 0 до 9; 


С Г^а-яА-яёЁа-гА-2] — не русская или английская буква в любом регистре. 


Как вы уже знаете, точка теряет свое специальное значение, если ее заключить 
в квадратные скобки. Кроме того, внутри квадратных скобок могут встретиться 
символы, которые имеют специальное значение (например, ^и -). Символ ^ теряет 
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свое специальное значение, если он не расположен сразу после открывающей квад- 
ратной скобки: 


$pattern = '/[09^]/u'; // 0, 9 um ^ 


Чтобы отменить специальное значение символа -, его необходимо указать после 
всех символов перед закрывающей квадратной скобкой: 


$pattern = '/[09-]/u'; // О, 9 или- 


Все специальные символы можно сделать обычными, если перед ними указать 
символ \: 


$pattern = '/[0\\-9]/а!'; // 0, - или 9 


Стандартные классы 


В регулярных выражениях допустимы следующие основные стандартные классы 
(полный их список смотрите в документации): 


П \а — соответствует любой цифре; 
С \„ — соответствует любой букве или цифре; 


П \ѕ — любой пробельный символ (пробел, табуляция, перевод страницы, новая 
строка или перевод каретки); 


O \D— не цифра. Эквивалентно (7541; 

O \w— не буква и не цифра. Эквивалентно [^\w]; 

С \s— не пробельный символ. Эквивалентно [^\з]. 
Получим все цифры из строки: 


$pattern = ' /\\а/и"; 

$str = "строка123"; 

Ѕагг = аггау(); 

preg_match_all ($pattern, $str, багк); 

print_r ($arr); 

// Array ( [0] => Array ( [0] => 1 [1] => 2 [2] => 3 ) ) 


Если нужно получить не цифры по отдельности, а числа, то после класса надо yka- 
зать символ +, означающий одно или большее число вхождений символа в строку: 


$pattern = '/\\dt/u'; 

$str = "строка123"; 

$arr = аггау(); 

ргед таїсһ а11 ($pattern, $str, багк); 
print_r ($arr); 

// Array ( [0] => Array ( [0] => 123 ) ) 


Следует учитывать, что стандартные классы при использовании кодировки UTF-8 
могут трактоваться гораздо шире, чем вы можете подумать. В итоге можно полу- 
чить результат, который совсем не ожидался. Советуем на практике использовать 
только классы \s и Х5, а остальные заменять явным указанием диапазона символов 
внутри квадратных скобок (при этом не забывайте про букву Ë): 
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$pattern "/10-9]/01"; // Вместо Ха 
$pattern = '/ [0-9а-яёа-2] /0'; // Вместо Хм 


Внутри квадратных скобок можно также использовать стандартные классы регу- 
лярных выражений формата POSIX: 


:alnun: ] ] — алфавитно-цифровые символы; 

O [[:word:]] — аналог класса \w; 

O [[:alpha:]] — буквенные символы; 

O [[:lower:]] — строчные буквы; 

П [[:upper:]] — прописные буквы; 

O [i:digit:]] — десятичные цифры; 

П гг: хаісдіє:]] — шестнадцатеричные цифры; 

O [[:punct:]] — знаки пунктуации; 

П [[:blank:]] — символы табуляции и пробелов; 

П (Г: зрасе:]] — пробельные символы; 

O [1:спегі:]] — управляющие символы; 

П ПІ:ргіпе:11 — печатные символы; 

O [[:graph:]] — печатные символы, за исключением пробела; 
:азс11:]] — символы с кодами от 0 до 127. 

Получим все числа из строки: 

$pattern = '/[[:digit:]]+/u'; 

$з6к = "123 456 789"; 

Ѕагг = аггау(); 

preg_match_all ($pattern, $str, багк); 

print_r ($arr); 

// Array ( [0] => Array ( [0] => 123 [1] => 456 [2] => 789 ) ) 


Квантификаторы 


Количество вхождений символа (или выражения) в строку задается с помощью 
квантификаторов: 


П {n} — n вхождений символа в строку (шаблон [0-9] {2} соответствует двум вхо- 
ждениям любой цифры); 


С (1, } — n или более вхождений символа в строку (шаблон [0-91{2, } соответст- 
вует двум и более вхождениям любой цифры); 


С {n,m} — не менее n и не более m вхождений символа в строку. Числа указывают- 
ся через запятую без пробела. Например, шаблон [0-91{2,4} соответствует от 
двух до четырех вхождений любой цифры; 


П * — ноль или большее число вхождений символа в строку. Эквивалентно KOM- 
бинации (0,); 
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O + — одно или большее число вхождений символа в строку. Эквивалентно KOM- 
бинации {1, }; 


O ?— ни одного или одно вхождение символа в строку. Эквивалентно комбина- 
ЦИИ (0,1). 


«Жадность» квантификаторов 


Все квантификаторы являются «жадными» — при поиске соответствия ищется 
самая длинная подстрока, соответствующая шаблону, и не учитываются более 
короткие соответствия. Рассмотрим это на примере. в котором получим содержи- 
мое всех тегов <b> вместе с самими тегами: 


$pattern = '#<b>.*</b>#siu'; 

$str = '<b>Text1</b>Text2<b>Text3</b>!'; 

$arr = array(); 

preg_match_all ($pattern, $str, $arr); 

print_r ($arr); 

// Array ( [0] => Array ( [0] => <b>Text1</b>Text2<b>Text3</b> ) ) 


Вместо желаемого результата мы получили полностью строку. Чтобы ограничить 
«жадность», необходимо после квантификатора указать символ ?: 


$pattern = '#<b>.*?</b>#siu'; 

$str = '<b>Text1</b>Text2<b>Text3</b>!'; 
$arr = array(); 

preg_match_all ($pattern, $str, $arr); 
print_r ($arr); 


Этот код выведет то, что мы искали: 
Array ( [0] => Array ( [0] => <b>Text1</b> [1] => <Б>ТехЕ3</Б> ) ) 


Ограничить «жадность» всех квантификаторов в шаблоне позволяет модификатор 
о. Обратите внимание на регистр модификатора — буква должна быть прописной: 


$pattern = '#<b>.*</b>#siUu'; 
$pattern = '#(?U)<b>.*</b>#siu'; 
$pattern = '#<b>(?U:.*)</b>#łsiu'; 
Группы 


Если необходимо получить содержимое без тегов, то нужный фрагмент внутри 
шаблона следует разместить внутри круглых скобок: 


$pattern = '#<b>(.*?)</b>#siu'; 

$str = '<р>Техі1</р>Техі2<р>Техі3</р>'; 

$arr = аггау(); 

preg_match_all ($pattern, ӛзек, багк, PREG РАТТЕВМ ОВРЕВ); 


Результат будет доступен через элемент массива с индексом, совпадающим с по- 
рядковым номером круглых скобок внутри шаблона (нумерация начинается с еди- 
ницы). Указав индекс 1, мы получим фрагмент, соответствующий (.*?), т. е. текст 
внутри тегов <>: 
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ргіпе к($агг[1] ?? "Нет элементов"); 
// Array ( [0] => Text1 [1] => Text3 ) 


Элемент массива с индексом 0 будет содержать фрагменты, полностью совпадаю- 
щие с шаблоном: 


print_r($arr[0] ?? "Нет элементов"); 
// Array ( [0] => <b>Text1</b> [1] => <Б>ТехЕ3</р> ) 


Круглые скобки часто используются для группировки фрагментов внутри шаблона. 
В этих случаях не требуется, чтобы фрагмент запоминался и был доступен в ре- 
зультатах поиска: 


$pattern = '#([a-z]+((st)|(xt)))#siu'; 

$str = 'test text'; 

$arr = аггау(); 

preg_match_all ($pattern, ӛзек, багк, РВЕС РАТТЕВМ ОВРЕВ); 
ргіпе к(багк); 


// Array ( 

// [0] => Array ( [0] => test [1] => text ) 
// [1] => Array ( [0] => test [1] => text ) 
// [2] => Array ( [0] => st [1] => xt ) 

// [3] => Array ( [0] => st [1] => ) 

// [4] => Array ( [0] => [1] => xt ) ) 


В этом примере мы получили массив из элементов для каждого совпадения. Все эти 
элементы (кроме элемента с индексом 0) соответствуют фрагментам, заключенным 
в шаблоне в круглые скобки. Элемент с индексом 1 содержит фрагменты, располо- 
женные в первых круглых скобках, с индексом 2 — во вторых круглых скобках 
и т. д. Три последних элемента являются лишними. Чтобы избежать захвата фраг- 
мента, после открывающих круглых скобок следует разместить символы ?:: 


$pattern = '# ([а-2]+(?: (?:5#) | (?:хЕ))) #ѕіц!'; 

$str = "Сезе text'; 

Ѕагг = аггау(); 

ргед шаїсһ а11 ($раёёегп, ӛзек, агг, PREG РАТТЕВМ ОКР! 
ргіпе к(багк); 

// Array ( 

// [0] => Array ( [0] => test [1] => text ) 

// [1] => Array ( [0] => test [1] => text ) ) 


221 


В); 


В результате массив состоит только из фрагментов, полностью соответствующих 
регулярному выражению. 


Обратите внимание на регулярное выражение в предыдущем примере: 


$pattern = '#([а-2]+( (3%) | (хЕ))) Жіп" 


Здесь мы использовали метасимвол |, который позволяет сделать выбор между 
альтернативными значениями. Выражение n [п соответствует одному из символов: п 
ИЛИ п: 


красн ( (ая) | (ое) ) — красная ИЛИ красное, но не красный. 
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Обратные ссылки 


К найденному фрагменту в круглых скобках внутри шаблона можно обратиться 
с помошью механизма обратных ссылок. Для этого порядковый номер круглых 
скобок в шаблоне указывается после слеша, например \1. Нумерация скобок внутри 
шаблона начинается с 1. Альтернативные варианты обращения: \91 и 17911). 


Для примера получим текст между одинаковыми парными тегами: 


$pattern = "%<((а-214) [^>]*?>(.*?) </\\1>#1ѕи"; 

$str = !"<Ы>ТехЕ1</р>ТехЕ2<І>ТехЕ3</І>"; 

Ѕагг = аггау(); 

ргед шаесһ а11 ($pattern, ӛзек, багк, PREG ЅЕТ ОВРЕВ); 

ргіпе к(багк); 

// Array ( 

// [0] => Array ( [0] => <b>Text1</b> [1] => b [2] => Text1 ) 
// [1] => Array ( [0] => <І>ТехЕЗ</І> [1] => I [2] => ТехёЗ ) ) 


Фрагментам внутри круглых скобок можно дать имена. Для этого следует указать 
одну из следующих комбинаций символов: 


(2Р<имя>шаблон) 
(2<имя>шаблон) 


(?"имя"шаблон) 


В качестве примера разберем E-mail на составные части: 


$pattern = 

'# (?<паме>[а-20-9_.-]+) @ (?<һоѕі> (2: [а-20-9-]+\\.)+[а-2]{2,6})#519'; 
$str = 'userlmail.ru'; 
$arr = array(); 


ргед шаесһ all ($pattern, ӛзек, багк, PREG ЅЕТ ОВРЕВ); 
print_r ($arr); 


// Array ( 

// [0] => Array ( 

// [0] => userlmail.ru 
// [пате] => user 

// [1] => user 

/7 [host] => mail.ru 
// [2] => mail.ru ) ) 


Чтобы внутри шаблона обратиться к именованным фрагментам, используется сле- 
дующий синтаксис: 


(?Р-имя) 
\К<имя> 
\К{имя} 
\К'имя' 
Ха<имя> 
\9 {имя} 
Ха "имя" 


Основы РНР. Создаем динамические И/еБ-страницы 555 


Для примера получим текст между одинаковыми парными тегами: 


$pattern = 
'#<(?<tag>[a-z]+)>(?<text>.*?)</(\\k<tag>)>#siu'; 
$str = '<b>Text1</b>Text2<I>Text3</I>!'; 
$arr = array(); 
ргед шаесһ all ($pattern, $str, $arr, PREG ЅЕТ ОВРЕВ); 
foreach ($arr as $v) { 
echo $v['text'] . "<br>\n"; 


} 
Результат в окне УУер-браузера: 


Text1 
Text3 


Просмотр вперед или назад 
Внутри круглых скобок могут быть расположены следующие конструкции: 


П (?=...) — положительный просмотр вперед. Выведем все слова, после которых 
расположена запятая: 


$pattern = '#\\м+(?=[,])#31а'; 
$str = !ехі1, text2, text3 text4'; 
$arr = array(); 
preg_match all ($pattern, ӛзек, $arr, PREG ЅЕТ ОВРЕВ); 
foreach ($arr as $v) { 
echo $v[0] . " "; 
} // text1l1 text2 


T 


С (?!...) — отрицательный просмотр вперед. Выведем все слова, после которых 
нет запятой: 


$pattern = '# [а-2]+[0-9] (?![,])#siu'; 
$str = !ехі1, text2, text3 text4'; 
$arr = array(); 
preg_match all ($pattern, $str, $arr, PREG ЅЕТ ОВРЕВ); 
foreach ($arr as $v) { 
echo $v[0] . " "; 
} // text3 text4 


T 


П (?<=...) — положительный просмотр назад. Выведем все слова, перед которы- 
ми расположена запятая с пробелом: 


$pattern = '#(?<=[,][ ]) [а-7]+[0-9] #51а'; 
$str = '6ехё1, text2, text3 text4'; 
$arr = array(); 
preg_match_all ($pattern, $str, Фагхг, PREG ЅЕТ ORDE 
foreach ($arr as $v) { 
echo $v[0] . " "; 
} // text2 text3 


20 
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П (2<!...) — отрицательный просмотр назад. Выведем все слова, перед которыми 
расположен пробел, но перед пробелом нет запятой: 


$pattern = '#(?<![,]) ([a-z]+[0-9])#siu'; 
$3Ег = !"кехЕе1, text2; бехі3 Eext; 
Ѕагг = агкау(); 
preg_match_all ($pattern, ӛзек, Фагхг, PREG ЅЕТ ОВРЕ 
foreach (Ѕагг аз $v) { 
echo зу “и; 
} // text4 


g 


Рассмотрим небольшой пример. Предположим, необходимо получить все слова, 
расположенные после тире, причем перед тире и после слов должны следовать 
пробельные символы: 


$pattern = '#\\5\\- ([а-20-9]+) \\з#510"; 
$str = '-word1 -мога2 -word3 -word4 -мога5'; 
$arr = array(); 
preg_match_all ($pattern, $str, багк, PREG SET_ORDER) ; 
foreach ($arr as $v) { 
есһо $у[1] .""; 
} // word2 мога4 


Как видно из результата, мы получили только два слова вместо пяти. Первое и по- 
следнее слова не попали в результат, т. к. расположены в начале и в конце строки. 
Чтобы эти слова попали в результат, необходимо добавить альтернативный выбор 
для начала строки: (^|\\з) и для конца строки: (\\з 1$). Чтобы найденные выраже- 
ния внутри круглых скобок не попали в результат, следует добавить после откры- 
вающих скобок символы ?:: 


$pattern = '#(?:^|\\5) \\- ([а-20-9]+) (?:\\51|$) #$51а'; 
$str = '-word1 -мога2 -word3 -word4 -мога5'; 
$arr = array(); 
preg_match all ($pattern, $str, багк, PREG ЅЕТ ОВРЕВ); 
foreach ($arr as $v) { 

echo Syll] ия 
} // word1 word3 word5 


Первое и последнее слова успешно попали в результат. Почему же слова word2 И 
word4 не попали в список совпадений? Ведь перед тире есть пробел и после слова 
есть пробел. Чтобы понять причину, рассмотрим поиск по шагам. Первое слово 
успешно попадает в результат, т. к. перед тире расположено начало строки и после 
слова есть пробел. После поиска указатель перемещается, и строка для дальнейше- 
го поиска примет следующий вид: 


-word1 <Указатель>-мога2 -могаз -word4 -мога5 
Обратите внимание на то, что перед фрагментом -кога2 больше нет пробела, и тире 


не расположено в начале строки. Поэтому следующим совпадением будет слово 
word3, И указатель снова будет перемещен: 


-могаї -мога? -мога3 <Указатель>-мога4 -мога5 
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Опять перед фрагментом -word4 нет пробела, и тире не расположено в начале стро- 
ки. Поэтому следующим совпадением окажется слово ч«ога5, и поиск будет завер- 
шен. Таким образом, слова чога2 И word4 не попадают в результат, т. к. пробел 
до фрагмента уже был использован в предыдущем поиске. Чтобы этого избежать, 
следует воспользоваться положительным просмотром вперед (2-...): 


$pattern = '#(?:^ | \\з) \\- ([а-20-9]+) (?=\\s|$)#siu'; 
$str = '-мога1 -мога2 -word3 -word4 -мога5'; 
Ѕагг = аггау(); 
ргед шаесһ а11 ($pattern, ӛзек, багк, PREG ЅЕТ ОВРЕВ); 
foreach ($arr аз $v) { 

echo [і о 
} // мога1 word2 word3 word4 word5 


В этом примере мы заменили фрагмент (?:\\ѕ|5) на (?=\\15). Поэтому все слова 
успешно попали в список совпадений. 


5.8.3. Сравнение с шаблоном 


Функция preg_match () выполняет сравнение с шаблоном. Формат функции: 


preg_match (string $pattern, string $subject[, array &$matches[, 
int $flags=0[, int $offset=0]]]) : int 


B первом параметре указывается шаблон регулярного выражения, а во втором — 
строка, с которой выполняется сравнение. Функция возвращает 0, если совпадение 
не найдено, 1 — при соответствии шаблону И false — в случае ошибки. 


Если указан параметр $matches, то первый элемент массива будет содержать фраг- 
мент, полностью соответствующий шаблону, а остальные элементы массива — это 
фрагменты, заключенные в шаблоне в круглые скобки. 


В качестве примера проверим E-mail на соответствие шаблону: 


$email = 'user@lmail.ru'; 

$pattern = '/^([a-z0-9_.-]+)@(([a-z0-9-]+\\.)+[a-z]{2,6})$/isu'; 
$arr = array(); 

if (preg_match ($pattern, $email, $акг)) { 


echo 'E-mail ' . $arr[0] . ' соответствует шаблону!; 
echo '<рг>пользователь: ', $arr[1], ' домен: ', $arr[2]; 
} 
else { 


echo 'E-mail не соответствует шаблону"; 


} 


Результат в окне УУер-браузера: 


E-mail user@mail.ru соответствует шаблону 
пользователь: user домен: mail.ru 


Выведем структуру массива $ахх: 


ргіпе к(багк); 
// Array ( [0] => user@mail.ru [1] => user [2] => mail.ru [3] => mail.) 
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П $arr[0] — текст, полностью соответствующий шаблону; 

С $arr[1] — соответствует группе ([а-20-9 .-14); 

С $arr[2] — соответствует группе (([а-20-9-1+\.)+[а-21{2,6}); 
П $arr[3] — соответствует группе ([а-=0-9-1+\.). 


Если какой-либо фрагмент заносить в массив не надо, то после открывающей круг- 
лой скобки следует указать комбинацию символов ?:. Последний элемент является 
лишним, давайте от него избавимся: 


$pattern = '/^ ([а-20-9_.-1]+)@ ( (2: [а-20-9-]+\\.)+[а-2]{2,6})$/15и'; 
Результат: 
Array ( [0] => user@mail.ru [1] => user [2] => mail.ru ) 


Если внутри шаблона находятся именованные группы, то массив будет ДОПОЛНИ- 
тельно содержать элементы с именами групп: 


$pattern = 

'# (2<пате> [а-20-9 .-]+) @ (?<Боз®> (?: [а-20-9-]+\\.)+[а-2]{2,6})#159'; 
Результат: 
Array ( [0] => user@mail.ru [name] => user [1] => user 


[host] => mail.ru [2] => mail.ru ) 


Если B параметре $Е1ачз задано значение PREG OFFSET CAPTURE, TO ДЛЯ каждого най- 
денного фрагмента будет указана его позиция в исходной строке. Для примера 
получим текст между одинаковыми парными тегами и выведем смещение относи- 
тельно начала строки: 


$str = "<р>Текст</р>"; 

$pattern = '#< ([а-2]+) [^>] *?>(.*?)</\\l>#isu'; 

Ѕагг = агкау(); 

if (ргед таїсһ ($pattern, ӛзек, баск, РВЕС ОЕЕЗЕТ САРТОВЕ)) { 
echo "Фрагмент: ', $arr[2] [0] ?? '', '<х>!; 


echo "Смещение: ', $агг[2] [1] ?? ''; 
} // Фрагмент: Текст<рг>Смещение: 3 
ргіпе к(багк); 
// Array ( 
// [0] => Array ( [0] => <Б>Текст</р> [1] => 0 ) 
// [1] => Array ( [0] => b [1] => 1) 
// [2] => Array ( [0] => Текст [1] => 3 ) ) 


ВНИМАНИЕ! 


При использовании флага PREG ОРЕЗЕТ САРТОВЕ Меняется формат массива $агг. Кроме 
того, смещение указывается в байтах, а не в символах. При использовании кодировки 
ОТЕ-8 это будет иметь значение. 
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5.8.4. Поиск всех совпадений с шаблоном 


Функция preg тассҺ() находит только первое совпадение с шаблоном. Чтобы полу- 
чить все совпадения, нужно воспользоваться функцией preg_match а11(). Формат 
функции: 
ргед шаїсһ а11(вігіпд $pattern, string $subject[, array &$паїсһеѕ[, 

іп $ Е]1ачз=РВЕС РАТТЕКМ ОВРЕВ[, 

int $offset=0]]]) : int 


В первом параметре указывается шаблон регулярного выражения, а во втором- 
строка, с которой выполняется сравнение. Функция возврашает число найденных 
совпадений с шаблоном (число 0, если совпадения не найдены) или значение 
false — в случае ошибки. 


Если в параметре $flags указано значение PREG PATTERN ORDER (значение по умолча- 
нию), то массив совпадений $matches будет содержать элементы, упорядоченные по 
порядковому номеру фрагмента, заключенного в шаблоне в круглые скобки. Нуле- 
вой элемент массива будет содержать список полных совпадений с шаблоном. 


В качестве примера получим все значения между тегами <b> и </b>: 


$str = '<рр>Текст1</р>Текст2<р>Текст3</р>'; 

$pattern = '#<b>(.*?)</b>#isu'; 

$arr = аггау(); 

preg_match_all ($pattern, ӛзек, багк, РВЕС РАТТЕВМ ОВРЕВ); 
ргіпе к(багк); 


// Array ( 
// [0] => Array ( [0] => <Б>Текст1і</о> [1] => <>Текст3</ь> ) 
// [1] => Array ( [0] => Тексті [1] => Текст3 ) ) 


Обратите внимание: чтобы ограничить «жадность» квантификатора, мы указали 
после символа * символ ?. 


Если в параметре $flags указано значение PREG 5ЕТ ORDER, ТО массив совпадений 
будет содержать элементы, упорядоченные по номеру совпадения. Каждый элемент 
массива будет содержать список совпадений фрагментов, заключенных в шаблоне 
в круглые скобки. Нулевой элемент массива будет содержать полное совпадение 
с шаблоном: 


$str = '<р>Текст1</р>Текст2<р>Текст3</0>'; 
$pattern = '#<b>(.*?)</b>#isu'; 
$arr = array(); 
preg_match all ($pattern, $str, $arr, PREG ЅЕТ ОВРЕВ); 
foreach ($arr as $v) { 
есһо м]: "и; 
} // Тексті Текст3 
ргіпе к(багк); 
// Array ( 
// [0] => Array ( [0] => <5>Текст1</ъ> [1] => Тексті ) 
// [1] => Array ( [0] => <5>Текст3</ъ> [1] => Текст3 ) ) 
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Если внутри шаблона находятся именованные группы, то массив будет ДОПОЛНИ- 
тельно содержать элементы с именами групп: 


$pattern = '#<Þb>(?<text>.*?)</b>#isu'; 

Результат: 

Array ( 
[0] => Array ( [0] => <>Текст1</ь> [text] => Тексті [1] => Текст1) 
[1] => Array ( [0] => <>Текст3</ь> [text] => Текст3 [1] => Текст3)) 


Если к флагам PREG PATTERN ORDER И PREG SET ORDER добавить значение PREG OFFSET 
CAPTURE, То ДЛЯ каждого найденного фрагмента будет указана его позиция B исход- 
ной строке: 


$str = "<Б>Текст</о>"; 
$pattern = '#<b>(.*?)</b>#isu'; 
$arr = array(); 
preg_match all ($pattern, ӛзек, Фагк, 
PREG ЅЕТ ОВРЕВ | PREG OFFSET CAPTURI 


ІН! 
`~ 


print_r ($arr); 


// Array ( 

// [0] => Аккау ( 

EI [0] => Array ( [0] => <b>Tekct</b> [1] => 0 
// [1] => Array ( [0] => Текст [1] => 3 ) ) 


$arr = аггау(); 
ргед шаесһ all ($pattern, ӛзек, Фагк, 
РВЕС РАТТЕВМ ОКПЕК | PREG OFFSET CAPTURI 


EJ 
` 


print_r ($arr); 


// Array ( 

// [0] => Array ( 

2? [0] => Array ( [0] => <>Текст</ь> [1] => 0 ) 

// [1] => Array ( 

// [0] => Array ( [0] => Текст [1] => 3 ) ) 
ВНИМАНИЕ! 


При использовании флага PREG ОҒЕ5ЕТ САРТОВЕ Меняется формат массива $агг. Кроме 
того, смещение указывается в байтах, а не в символах. При использовании кодировки 
ОТЕ-8 это будет иметь значение. 


5.8.5. Замена в строке 


Функция ргед гер1асе() ищет в строке $subject все совпадения с шаблоном 
$pattern и заменяет их указанным значением $ геріасетепі. Формат функции: 


preg_replace (mixed $pattern, mixed $гер1асешепе, mixed $subject[, 
int $limit=-1[, int &$count]]) : mixed 


Первые три параметра могут быть одномерными массивами. Если указан параметр 
$limit, то функция заменит только указанное число первых совпадений с шабло- 
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ном. Функция возвращает измененную строку или массив. Если совпадения не най- 
дены, то функция вернет исходную строку или массив. При ошибке возвращается 
значение null. 


Если указан параметр $count, то через него будет доступно количество произведен- 
ных замен: 


$str = "201, 202, 203, 204, 205"; 

$pattern = '#20[14]#u'; 

$repl = '111'; 

$count = 0; 

5вЕг2 = preg_replace ($pattern, 5гері, $str, -1, $count); 
echo $str2; // 111, 202, 203, 111, 205 

echo "\п Количество замен: $count"; 


// Количество замен: 2 


В строке для замены могут присутствовать обратные ссылки $номер, соответст- 
вующие группам внутри шаблона. В качестве примера возьмем два тега и поменяем 
имена тегов местами: 


$str = "<Бү><жа>"; 

$pattern = '#< ([а-2]+) >< ([а-2]+) >#13и'; 

бгері = !<52><61>"; 

$str2 = preg replace ($pattern, $гер1, ӛзек); 

echo htmlspecialchars ($str2, ЕМТ COMPAT | ENT_HTML5, "ОТЕ-8'); 
// Выведет в окне Мер-браузера: <td><br> 


Чтобы отделить номер скобки от последующего текста, необходимо заключить но- 
мер в фигурные скобки ($ {номер}: 


бгері = '<${2}><${1}>'; 


Обратиться к найденному фрагменту в круглых скобках можно не только с по- 
мощью синтаксиса $номер (ИЛИ $ {номер}), но и указав номер скобок, перед которым 
стоит слеш (\номер): 


бгері = '<\\2><\\1>'!; 


Функция ргед геріасе са11раск() выполняет поиск в строке $subject ПО шаблону 
$pattern и замену с использованием функции обратного вызова $са11ъаск. Формат 
функции: 
ргед геріасе са11раск (тіхеа $pattern, callable $callback, 

mixed $subject[, int $limit=-1[, 

int &$count]]) : mixed 


В отличие от preg_replace (), функция ргед геріасе са11раск() передает функции, 
указанной в параметре 5са11Баск, найденные совпадения в виде массива. Результат, 
возвращаемый функцией $са11Ъаск, служит фрагментом для замены. 

Переделаем наш предыдущий пример и добавим функцию обратного вызова: 


$str = '<BR><TD>'; 
$pattern = '#< ([а-2]+) >< ([а-2]+) >#13и'; 
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5вЕг2 = ргед геріасе са11БрасКк(браебекп, 
function ($matches) ( 
print_r ($matches); 
// Array ( [0] => <BR><TD> [1] => BR [2] => TD ) 


$гер1 = '<' . пр strtolower ($matches[2]) . '><!; 
бгері .= пр strtolower ($matches[1]) . '>'; 
return $repl; 
}, $str); 
echo htmlspecialchars ($str2, ЕМТ СОМРАТ | ENT_HTML5, 


"ОТЕ-8'); 
// Выведет в окне Мер-браузера: <td><br> 


Нулевой элемент массива $matches будет содержать полное соответствие шаблону, 
а последующие элементы — фрагменты, заключенные в шаблоне в круглые скобки. 


5.8.6. Функция preg_split() 


Функция ргед_зр11+ () разбивает строку $subject по шаблону $pattern и возвращает 
массив подстрок. Формат функции: 


preg_split (string $pattern, string $subject[, int $limit=-1[, 
int $flags=0]]) : array 


Если задан параметр $limit, то функция возвратит только указанное число под- 
строк. Последняя подстрока будет содержать оставшуюся часть строки: 


ЗЕЕ = 1201... 202,:203,;:204;-2051% 
$pattern = '#[\\з, ]+#50'; 
багг = preg_split ($pattern, $str, 4); 
foreach ($агг аз $v) { 

есһо $. ';'; 
} // 201;202;203;204, 205; 


В параметре $flags могут быть указаны следующие значения (или комбинация зна- 
чений, соединенных оператором |): 


T 


О PREG SPLIT_NO 


PTY — функция вернет только непустые подстроки; 


С PREG SPLIT БЕГІМ CAPTURE — фрагмент, заключенный в шаблоне в круглые скоб- 
ки, также будет возвращаться; 


п PREG 5РІІТ ОРЕЗЕТ CAPTURE 
ПОЗИЦИЯ В ИСХОДНОЙ строке. 


для каждой найденной подстроки будет указана ее 


Пример: 
$str = '201 - 202, 203. 204"; 
$pattern = '#([\\3,.-]+)#50'; 


$arr = preg_split ($pattern, ӛзек, -1, PREG SPLIT БЕШІМ CAPTURE) ; 
print_r ($arr); 
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Результат: 


Аггау 
( 


о лм шо № но 
| 
У 


=> 204 
) 


Превратить етроку в массив символов можно так: 


$str = "строка"; 

preg_split('##u', $str, -1, РКЕС 5РІПТ МО EMPTY); 

ргіпе к(багк); 

// Array ( [0] => с [1] => т [2] => р [3] => о [4] => к [5] => а ) 


$arr 


ВНИМАНИЕ! 


Если не требуется указания шаблона, то вместо функции preg_split() лучше исполь- 
зовать функцию explode () (см. разд. 5.7.16). 


5.8.7. Функция ргед дгер() 
Функция ргед дгер() возвращает новый массив, состоящий из элементов массива 
$input, которые соответствуют шаблону $pattern. Формат функции: 
ргед агер (ѕігіпа $pattern, array Ş$input[, int $#1адѕ=0]) : array 
Индексы массива сохраняются. Если в параметре $flags указан флаг PREG GREP 


INVERT, ТО возвращается массив значений, не соответствующих шаблону. В качестве 
примера получим все элементы массива. состоящие только из цифр, И наоборот: 


Ѕагг = аггау (20, 54, "Текст", 457); 

$pattern = '#^[0-9]+$#su'; 

багү2 = preg grep ($pattern, $arr); 

print_r ($arr2); 

// Array ( [0] => 20 [1] => 54 [3] => 457 ) 

багг3 = preg агер ($pattern, $arr, PREG GREP INVERT); 
print_r ($arr3); 

// Array ( [2] => Текст ) 


5.9. Работа с датой и временем 


При работе с датой и временем нужно вначале задать зону местного времени. Для 
этого используется функция date default timezone set (<Зона>): 


date _default_timezone_set ('Europe/Moscow'); 
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Задать значение можно также с помощью директивы date.timezone: 


date.timezone=Europe/Moscow 


Получить текущее значение позволяет функция date default timezone get (): 


echo date default timezone get(); // 


Europe/Moscow 


5.9.1. Получение текуших даты и времени 


Для получения текущих даты и времени предназначены следующие функции: 


С <іпе() — возвращает число секунд, прошедшее с 1 января 1970 r.: 


echo time(); // 1507005425 


П localtime () — возвращает локальное время. Формат функции: 


localtime ([іпі $timestamp=time () |, 


Если первый параметр не указан, 


bool $15 аѕѕосіаііуе=Ға15е]]) : array 


то используется значение, возвращаемое 


функцией time(). Если второй параметр имеет значение true, то возвращается 


ассоциативный массив, в противном 


ргіпё к(1оса1Е1е()); 


/ж 

Аггау 

( 0] => 49 
1] => 52 
2] => 
3] => 4 
4] => 9 
5] => 117 
6] => 3 
7] => 276 
8] => 0 ) 

*/ 

print_r (localtime (time(), true)); 

/ж 

Аггау 


( сп sec] => 49 
tm min] => 52 
tm hour] => 0 
tm mday] => 4 
tm mon] => 9 


ша уеаг| -> 117 
ша wday] => 3 

сп yday] => 276 
tm 154956] => 0 ) 


ж) 


случае — список: 
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Элементы массива имеют следующие значения: 

© tm sec или 0 — секунды (от 0 до 59); 

© tm min ИЛИ 1 — минуты (от о до 59); 

е tm hour или 2-- часы в 24-часовом формате (от 0 до 23); 

© tm mday или з — день месяца (от 1 до 31); 

e tm поп ИЛИ 4 — месяц (0 — для января и 11 — для декабря); 
© tm year или 5 — число лет, прошедшее с 1900 года; 


® tm идау или 6 — день недели (0 — для воскресенья и 6 — для субботы); 


e tm удау или 7 — день с начала года (от 0 до 365); 


е tm 154956 или 8 — признак летнего времени. 


5.9.2. Форматирование даты и времени 


Функция date (<Строка формата>[, «Исходная дата>]) форматирует дату и время 
в соответствии со строкой формата. Если второй параметр не указан, то использу- 
ется значение, возвращаемое функцией +1те (). В параметре <Строка формата> могут 
быть использованы следующие служебные СИМВОЛЫ: 


ао, о‚о‚о о, оо о, ооо ,оо[оо[ооо 


U — число секунд, прошедшее с 1 января 1970 г.; 

у — год из 4 цифр; 

у — год из 2 цифр; 

z — день с начала года (от 0 до 365); 

ғ — название месяца по-английски; 

m — номер месяца с предваряющим нулем (от 01 до 12); 

n — номер месяца без предваряющего нуля (от 1 до 12); 

м — аббревиатура месяца из трех букв по-английски; 

t — количество дней в месяце; 

а — номер дня с предваряющим нулем (от 01 до 31); 

j — номер дня без предваряющего нуля (от 1 до 31); 

1 — название дня недели по-английски; 

м-- номер дня недели (0 — для воскресенья и 6 — для субботы); 
№ — номер дня недели (1 — для понедельника и 7 — для воскресенья); 
р — аббревиатура дня недели из трех букв по-английски; 

А — АМ (до полудня) или PM (после полудня); 

а — am (до полудня) или pm (после полудня); 


н — часы в 24-часовом формате (от 00 до 23); 
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с — часы в 24-часовом формате без предваряющего нуля (от 0 до 23); 
h — часы в 12-часовом формате (от 01 до 12); 

g — часы в 12-часовом формате без предваряющего нуля (от 1 до 12); 
і — минуты (от 00 до 59); 

ѕ — секунды (от 00 до 59); 


р — смещение временной зоны (в формате +03:00); 


п 
п 
п 
п 
п 
п 
П о — смещение временной зоны (в формате +0300); 
п 


е — название временной зоны (например, Еогоре/Моѕсом). 


Выведем текущие дату и время таким образом, чтобы день недели и месяц были 
написаны по-русски (листинг 5.23). 


Листинг 5.23. Вывод текущей даты 


<?php 

date _default_timezone_set ('Europe/Moscow'); 

$days = array ('BOCKpeceHbe', "понедельник", 'вторник', "среда", 

"четверг", 'пятница', "суббота"); 

$months = аггау('', "января", 'февраля', "марта", "апреля", "мая", 
"июня", 'июля', "августа", "сентября", "октября", 
‘ноября', "декабря"); 

$date = 'Сегодня<рг>'; 

$date .- $4ауз [ (106) аӢаёе ('м')]; 

$date .= дағе(" а); 

$date .= $months[(int)date('n')]; 

$date .= date(' Y'); 

$date .= date(' Н:1:5') . 'xbr>' . date('d.m.y'); 

echo $date; 


Код, приведенный в листинге 5.23, выведет в окне У/ер-браузера: 


Сегодня 
пятница 05 января 2018 08:11:37 
05.01.18 


Если в функции аа+е () указан второй параметр, то дата будет не текущая, а соот- 
ветствующая значению из второго параметра. Например, в функцию можно пере- 
дать число секунд, прошедшее с 1 января 1970 r., и получить любое другое форма- 
тирование даты: 


$date = date ("Дата d-m-Y", 1580986651); 
echo $date; // Выведет: Дата 06-02-2020 


Или можно получить дату создания файла: 


$date = date ("Дата а-ш-У", Ғі1есііте ("іпаех.рһр")); 
echo $date; // Выведет: Дата 03-01-2018 
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Функция strftime() позволяет отформатировать дату в зависимости от настроек 
локали. Формат функции: 


strftime (string $format[, int $timestamp=time()]) : string 


Если второй параметр не указан, то используется значение, возврашаемое функци- 
ей біте (). В параметре $format могут быть указаны следующие служебные CHM- 
волы: 


С зу — год из двух цифр; 


O %Ү--год из четырех цифр; 

С sj — день с начала года (от 001 до 366); 

С зп — номер месяца с предваряющим нулем (от 01 до 12); 

С +5 — сокращенное название месяца в текущей локали: 
setlocale (1С TIME, "га RU', 'Russian Russia'); 
echo iconv ('windows-1251', 'UTF-8', strftime("%b")); // OKT 


С %B— полное название месяца B текущей локали: 


ѕеі1оса1е (1С ТІМЕ, 'га КО", 'Russian Russia'); 
echo iconv ('windows-1251', 'ОТЕ-8', strftime("%B")); 
// Октябрь 


С зи — номер недели в году. Первый понедельник года считается первым днем 
первой недели; 


П за — номер дня с предваряющим нулем (от 01 до 31); 
O %ч4-- номер дня недели (0 — для воскресенья и 6 — для субботы); 


O ѕа — сокращенное название дня недели в текущей локали: 


ѕеі1оса1е (1С ТІМЕ, 'га ВО', 'Russian Russia'); 
echo iconv ("міпаоиѕ-1251', "ОТЕ-8', strftime("%a")); // Ср 


O ѕА — полное название дня недели в текущей локали: 


ѕеі1оса1е (1С ТІМЕ, 'га КО", 'Russian Russia'); 
echo iconv ("міпаоиѕ-1251', "ОТЕ-8', strftime("%A")); 


// среда 

%H — часы в 24-часовом формате (от 00 до 23); 
%I — часы в 12-часовом формате (от 01 до 12); 
эм — минуты (от 00 до 59); 


%5-- секунды (от 00 до 59); 


оччо о 


5с — формат даты и времени по умолчанию в текущей локали: 


ѕеі1оса1е (1С ТІМЕ, 'га ВО', 'Russian Russia'); 
echo iconv ("міпаоиѕ-1251', "ОТЕ-8', strftime("%c")); 
// 07.02.2018 1:42:16 
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O 5х — представление даты в текущей локали: 


ѕеі1оса1е (1С ТІМЕ, 'га ВО', 'Russian Russia'); 
echo iconv ('windows-1251', "'ОТЕ-8', strftime("%x")); 
// 07.02.2018 


С зх — представление времени в текущей локали: 


ѕеі1оса1е (1С ТІМЕ, 'га КО", 'Russian Russia'); 
echo iconv ('windows-1251', "'ОТЕ-8', strftime("%X")); 
// 2:02:30 


П <Т--комбинация $H: %M: 3S: 


setlocale(LC_TIME, 'га ВО', 'Russian Russia'); 
echo iconv ('windows-1251', 'UTF-8', strftime("%T")); 
// 02:02:31 


О %%-- символ $. 


Пример вывода текуцих даты и времени: 


setlocale(LC_TIME, 'га КО", 'Russian Russia'); 
echo iconv ('windows-1251', 'UTF-8', strftime("%A %d %B %Y %T")); 
// среда 07 Февраль 2018 02:06:27 


Результаты показаны для следующей локали в Windows: 


echo зеЕ1оса1е (1С ТІМЕ, "ка КО", "Кивзіап Russia'); 
// Russian Киввіа.1251 


Если на вашем компьютере локаль настроена на кодировку UTF-8, то функцию 
iconv () использовать не нужно. 


5.9.3. Проверка корректности введенной даты 


Функция checkdate() позволяет проверить корректность введенной даты. Формат 
функции: 


checkdate (<Месяц>, <День>, <Год>) 


Функция возвращает true, если дата, заданная аргументами, является правильной. 
Дата считается правильной, если: 


O год в диапазоне от 1 до 32 767 включительно; 
o месяц в диапазоне OT 1 до 12 включительно; 


ПІ день является допустимым номером дня для месяца, заданного аргументом 
<Месяц>. 


Пример проверки: 


if (сһесКкдағе(2, 29, 2018)) echo "Дата правильная'; 
еізе есһо "Нет"; // Т. к. даты 29.02.2018 нет, выведет: Нет 
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5.9.4. Класс DateTime 


С помощью класса DateTime можно получить текущие дату и время, выполнить 
форматирование, прибавить или вычесть интервал, сравнить два объекта, а также 
преобразовать строку с датой и временем в объект класса DateTime. 


Создание объекта 


Формат конструктора класса DateTime: 


public __construct ([string $time='now'[, DateTimezone $timezone=null]) 


B первом параметре можно указать дату и время в виде строки. Если параметр не 
задан, то используется значение now, которое означает текущее время. Во втором 
параметре можно указать зону местного времени. 


Пример создания объекта и получения текущих даты и времени: 


$dt = new DateTime ('пом', new DateTimezone ('Europe/Moscow')); 
echo $dt->getTimestamp (); // 1507077740 
echo "Ха", Ѕас->Ғогтаї ('d.m.Y H:i:s'); // 04.10.2017 03:42:20 


Пример указания произвольной даты и времени: 


$dt = new DateTime ('2017-10-03 03:15:00", 
рем DateTimezone ( 'Еагоре/Мозсом')); 
echo $dt->format ('d.m.Y Н:1:5'); // 03.10.2017 03:15:00 


Указание и получение значений 


Задать произвольные значения позволяют следующие методы: 


O setTimezone () задает зону местного времени. Формат метода: 


public setTimezone (DateTimezone $timezone) : DateTime 


O setDate() — задает дату. Формат метода: 


public setDate (int $year, int $month, int $day) : DateTime 


С setTime() — задает время. Формат метода: 


public setTime (int $hour, int $minute[, int $second=0[, 
int $microseconds=0]]) : DateTime 


С setTimestamp() — задает число секунд, прошедшее с 1 января 1970 г. Формат 
метода: 


public setTimestamp (int $timestamp) : DateTime 


Для получения значений предназначены такие методы: 


п getTimezone () возврашает зону местного времени. Формат метода: 
public getTimezone() : DateTimezone 
o getOffset() — возвращает смещение часовой зоны в секундах. Формат метода: 


public getOffset() : int 
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П getTimestamp() — возвращает число секунд, прошедшее с 1 января 1970 г. Dop- 
мат метода: 
public getTimestamp() : int 

Пример: 

$dt = new DateTime (); 


$dt->setTimezone (new DateTimezone ('Europe/Moscow')); 
$dt->setDate (2017, 10, 3); 
$dt->setTime (3, 15, 0); 


echo $dt->getTimestamp (); // 1506989700 

echo "Ап", $dt->format('d.m.Y H:i:s'); // 03.10.2017 03:15:00 
echo "Ап", $dt->getTimezone ()->getName (); // Europe/Moscow 

echo "Ха", $dt->getOffset(); // 10800 


Форматирование строки с датой и временем 


В предыдушем примере для вывода даты и времени мы воспользовались методом 
format (), который позволяет выполнить форматирование в соответствии со строкой 
формата $format. Формат метода: 


public format (string $format) : string 


В строке $format Используются служебные символы, применяемые в функции 
date () (см. разд. 5.9.2). 


Вместо строки формата можно указать следующие константы: 


echo DateTime: : АТОМ; // У-ш-а\ТН:1:$Р 
echo "Ааа", DateTime::COOKIE; // 1, d-M-Y H:i:s Т 
echo "Ап", раёетТіте::В55; 1/0, а У Н:і:ѕ О 
echo "Ап", ПасеТіпе::М3С; // Ү-т-а\тн:і:ѕр 
echo "Ха", БағеТіше::1508601; // У-ш-а\ТН:1:$0 
echo "Аа", DateTime::RFC822; // р, а у H:i:s О 
echo "Ап", DateTime::RFC850; // l, а-м-у Н:і:ш Т 
echo "Ап", DateTime::RFC1036; // р, а у Н:1:$ О 
echo "Ап", DateTime::RFC1123; // D, d У Н:1:5 О 
echo "Аа", DateTime::RFC2822; // D, d Y H:i:s O 
echo "Ап", DateTime::RFC3339; // У-ш-а\ТН:1:5Р 
Пример: 

$dt = new ПатеТіше(); 


echo $dt->format (DateTime: : СООКІЕ); 
// Wednesday, 07-Feb-2018 04:35:52 MSK 


Разбор строки с датой и временем 


Преобразовать строку с датой и временем в объект класса DateTime позволяет CTA- 
тический метод createFromFormat (). Формат метода: 


public static createFromFormat (string $format, string $time[, 
DateTimezone $timezone]) : DateTime 
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Если преобразовать не удалось, то метод вернет значение false. Получить описа- 
ние ошибки можно с помощью статического метода getLastErrors (). Пример: 


$dt = DateTime: :createFromFormat (DateTime: : СООКТЕ, 
'Wednesday, 07-Feb-2018 04:35:52 MSK'); 
if ($dt !== false) { 
echo $dt->format ('d.m.Y H:i:s'); // 07.02.2018 04:35:52 


} 

else ( 
echo "Не удалось преобразоватьхп"; 
print_r (DateTime: : де ТазЕЕгкогз ()); 


Прибавление и вычитание интервала 


Класс DateTime содержит методы ааа () и вчао(), которые позволяют прибавить ИЛИ 
вычесть интервал соответственно. Форматы методов: 


public ааа (DateInterval $interval) : DateTime 
public sub (DateInterval $interval) : DateTime 


Интервал задается в виде объекта класса DateInterval. Формат конструктора: 


public __construct (string біпбекуа1) 


Конструктор принимает строку специального формата. Первой буквой в строке 
указывается Р. Далее приводятся значения компонентов даты. Затем идет буква т, 
за которой приводятся значения компонентов времени. Компоненты даты и време- 
ни обозначаются следующими буквами: 


Y — год; 
м — месяц; 


р — день; 


н — час; 


o 

o 

o 

O w— неделя; 
o 

С м — минута; 
п 


ѕ — секунда. 


Если не удалось распознать формат строки, то генерируется исключение. Поэтому 
инструкцию следует разместить внутри блока try: 


5а = new DateTime ('2017-10-03 03:15:00", 
рем DateTimezone ( 'Еагоре/Мозсом')); 

echo $dt->format ('d.m.Y Н:1:5'); // 03.10.2017 03:15:00 
try { 

$dt->add (new БПабеІпбегуа1("Р1Ү2М3рТ4Н5М65")); 

// + 1 год 2 месяца 3 дня 4 часа 5 минут и 6 секунд 

echo "Ха", $dt->format('d.m.Y Н:1:5'); // 06.12.2018 07:20:06 
} catch (Exception бе) ( 

есһо "Ап Не удалось прибавить"; 
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try 1 

ŝdt->sub (new DateInterval('P2W')); 

// - 2 недели 

echo "Аа", $dt->format ('d.m.Y Н:1:5'); // 22.11.2018 07:20:06 
} catch (Exception бе) ( 

echo "Ап Не удалось вычесть"; 


Вычисление разницы между датами 


Получить разницу между двумя датами позволяет метод diff (). Формат метода: 


public diff (DateTimeInterface $object[, 
bool $absolute=false]) : DateInterval 


Вот пример получения разницы в днях с указанием знака перед отрицательным 
значением: 


54-1 = new DateTime ('2017-10-03'); 

$dt2 = new DateTime ('2017-10-23'); 

$dt3 = new DateTime ('2017-09-03'); 

$interval = $dt1->diff ($962); 

echo $interval->format ("Разница brga дней"); 

// Разница 20 дней 

$interval = $dt1->diff ($963); 

echo "\п", $interval->format ("Разница $г%а дней"); 


// Разница -30 дней 


Сравнение двух объектов DateTime 


Два объекта DateTime МОЖНО сравнивать с помощью операторов сравнения: 


$921 = new DateTime ('2017-10-03'); 
$dt2 = new DateTime ('2017-10-03'); 
$dt3 = new DateTime ('2017-09-03'); 


мас dump ($dt1 == $dt2); // bool (true) 
var dump ($dt1 > $dt3); // bool (true) 
var_dump ($dt1 < $dt3); // bool (false) 


5.9.5. «Засыпание» программы 


Функции sleep() И чз1еер() прерывают выполнение сценария на указанное время, 
по истечении которого сценарий продолжит работу. Форматы методов: 


ѕІеер (<Время в секундах>) 


usleep (<Время в микросекундах>) 


Пример: 

echo дате ("Н:1:5'); // 07:12:30 
sleep (5); // 5 секунд 
usleep (5000000); // 5 секунд 


echo "Ап", date('H:i:s'); // 07:12:40 
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5.9.6. Измерение времени выполнения 


Изменить время выполнения программы позволяет функция microtime(), которая 
возвращает число микросекунд, прошедшее с 1 января 1970 г. Формат функции: 


microtime ( [6001 $get_as_float=false]) : mixed 


Если параметр имеет значение Ға1зе или не указан, то функция возвращает строку 
в формате <микросекунды> <секунды>. Параметр <секунды> СОДержит число секунд, 
прошедшее с 1 января 1970г., а параметр <микросекунды> -- число микросекунд, 
прошедшее после значения параметра <секунды>: 


echo microtime (); // 0.65895300 1507093522 
list ($micro, $second) = ехр1оае(' ', microtime()); 
$micro = (float) $1 ско; 

$second = (float)$second; 

var dump ($micro) ; // float (0.658983) 

var dump ($зесопа); // float (1507093522) 


Если параметр имеет значение true, ТО функция возвращает число типа float: 


echo microtime (true); // 1507093522. 6591 


Создадим имитацию выполнения какого-либо процесса и измерим время его вы- 
полнения (листинг 5.24). 


Листинг 5.24. Измерение времени выполнения 


<?php 
// Отключаем буферизацию 
if (ор дес 1еуе1() > 0) ор епа flush(); 
ор іпріісіс Ғ10ѕһ(); 
// Запоминаем начальное время 
$t = microtime (true); 
echo str pad("0%<br>\n", 4096); 
for ($i = 10; $i < 101; $i += 10) { 
sleep (1); // Имитация процесса 
echo век раа("{$1}%<рх>\п", 4096); 
} 
// Вычисляем разницу между метками 
printf ("%.6f<br>\n", microtime (true) - $t); // 10.151989 
$t2 = $ SERVER [ 'REQUEST_TIME_FLOAT'] ?? 0; 
( 


printf ("%.6f<br>\n", microtime (true) - 5%2); // 10.157440 


В результате с периодичностью в секунду программа выводит B Web-6paysep стро- 
ки с индикацией хода выполнения, и в самом конце мы получим два числа: 


10.151989 
10.157440 
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Первое число отображает разницу между двумя запросами системного времени, 
которые мы делали с помощью функции microtime (). Если мы вычтем первую MeT- 
ку из второй, то получим время выполнения программы. 


Второе число является разницей между текущим значением функции microtime() 
и значением переменной окружения $ SERVER['REQUEST_TIME_FLOAT'], которая соз- 
дается автоматически и содержит метку начала запроса. 


С помощью функции microtime() мы можем измерять время выполнения фрагмен- 
тов кода и на основании результата производить различные оптимизации. Напри- 
мер, написали один алгоритм, измерили, затем переписали его иначе, опять изме- 
рили. Сравнили два результата и оставили в программе самый эффективный алго- 
ритм. С помощью этой функции можно также искать фрагменты кода, которые 
выполняются слишком медленно, и пытаться выполнить оптимизацию этих фраг- 
ментов, что-либо изменяя в программе. 


5.10. Пользовательские функции 


Функция — это фрагмент кода РНР, который можно вызвать из любого места про- 
граммы. В предыдущих разделах мы уже не один раз использовали встроенные 
функции РНР — например, с помощью функции time() получали число секунд, 
прошедшее с 1 января 1970 года. В этом разделе мы рассмотрим создание пользо- 
вательских функций, которые позволят уменьшить избыточность программного 
кода и повысить его структурированность. 


5.10.1. Создание функции 


Функция описывается с помощью ключевого слова function ПО следующей схеме: 


function <Имя функции> ( [<Параметры через запятую>]) 1 
<Тело функции> 
[return[ <Возвращаемое значение>1; | 


} 


Имя функции должно быть уникальным и может содержать только буквы, цифры, 
символ подчеркивания и не может начинаться с цифры. Основное различие между 
именами функций и переменных заключается в значении регистра символов. Имена 
переменных зависят от регистра, а названия функций не зависят. 


Например, следующие имена функций одинаковы: 


$str = '\\"Волга\\"'; 
echo ѕігірѕ1аѕһеѕ ($str); // "Волга" 
echo StripSlashes ($str); // "Волга" 


После имени функции в круглых скобках можно указать один или несколько mapa- 
метров через запятую. Параметров может вообше не быть. В этом случае указыва- 
ются только круглые скобки. 


Между фигурными скобками располагаются инструкции РНР, которые будут 
исполнены после каждого вызова функции. 
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Функция может возвращать значение при ее вызове. Возвращаемое значение зада- 
ется с помощью оператора возврата return. 


Приведем несколько примеров: 
П пример функции без параметров: 


function print ОК() { 
есһо "Сообшение при удачно выполненной операции"; 


} 


П пример функции с одним параметром: 


function print message ($msg) 1 
echo $msg; 


} 
С пример функции, возвращающей сумму двух переменных: 


function sum($x, $y) { 
$z = $x + $y; 
return $z; 


} 


В качестве возвращаемого значения в операторе возврата return можно указывать 
не только имя переменной, но и выражение: 


function зим ($х, $y) { 
return ($x + $y); 


} 


В программе функции можно вызвать следующим образом: 


print ОК(); // Сообщение при удачно выполненной операции 
ргіпі пеззаде ("Сообщение"); // Сообщение 
$var = зша(5, 2); // Переменной 5уаг будет присвоено значение 7 


ргіпе пеззаде($уахг); // 7 


Инструкции, указанные после оператора return, никогда не будут выполнены: 


function зим ($х, $y) { 
return ($x + $y); 
echo "Сообшение"; // Эта инструкция никогда не будет выполнена 


} 


Имя переменной, передающей значение функции, может не совпадать с именем 
переменной внутри функции: 


function зим ($х, $y) { 
return ($x + $y); 

} 

$varl = 5; 

25 

$var3 = зшпа(5уаг1, $var2); 


$var2 
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Некоторые параметры функции могут быть необязательными. Для этого при опре- 
делении функции такому параметру необходимо присвоить начальное значение. 
Например, переделаем наш предыдущий пример и сделаем второй параметр необя- 
зательным: 


function зим ($х, бу = 2) { 
return ($x + $y); 


$a = 5; 
буагі = sum($a); // Переменной $varl будет присвоено значение 7 


$var2 = звшп(ба, 5); // Переменной $уаг2 будет присвоено значение 10 


Таким образом, если второй параметр не задан, его значение будет равно 2. Обра- 
тите внимание: параметры, для которых указаны значения по умолчанию, должны 
быть расположены после остальных параметров. 


5.10.2. Расположение описаний функций 


Обычно описания функций принято располагать в начале файла или в отдельном 
файле, хотя функции могут находиться в любом месте файла, даже после места вы- 
зова функции: 


ба = 5; 
$var = sum($a); // Переменной $var будет присвоено значение 7 
function sum($x, бу = 2) { 

return ($x + $y); 


} 


Описание функции можно разместить внутри фигурных скобок, например внутри 
условия. В этом случае функция будет создана после проверки условия. До этого 
момента она не существует, поэтому вызов функции до проверки условия вызовет 
ошибку: 


// Ошибка функция print пеззаде() еще не определена 
// ркіпе шеззаде("Сообшение"); 

$br = true; 

1Е (SDE ) ( 


function print message ($msg) { 
echo "{$msg}<br>"; 


} 
else { 
function print _ message ($msg) { 
echo $msg; 


} 


ргіпе пеззаде("Сообшение"); // Сообщение<рг> 
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Конечно же, в данном случае было бы правильнее создать второй параметр и в за- 
висимости от его значения выводить тег <br>: 


function print шеззаде ($msg, $br = false) { 
if ( $br ) echo "{$msg}<br>"; 
else echo $msg; 
} 
print шеззаде("Сообшение", true); // Сообщение<рг> 
ргіпё пеззаде("Сообшение"); // Сообщение 


Допускается создание функции внутри другой функции. В этом случае вложенная 
функция будет создана в глобальной области видимости только после вызова пер- 
вой функции: 


function скеабе Ғипс() { 
echo "Функция create func()'; 
function print _ message ($msg) { 


echo $msg; 
} 
} 
// Ошибка функция print message() еше не определена 
// ркіпе шеззаде("Сообшение"); 
create_func (); // Функция create func () 
print шеззаде("Сообшение"); // Сообщение 


// Ошибка повторного создания функции print message () 
// create Ғапс(); 


5.10.3. Операторы require и include. 
Выносим функции в отдельный файл 


Если функции вынесены в отдельный файл, то подключить его позволяют два опе- 
ратора: require и include. Операторы имеют следующий формат: 


require (<Путь или имя файла>) 


require <Путь или имя файла> 


include (<Путь или имя файла>) 


include <Путь или имя файла> 


Вынесем функцию sum() в отдельный файл C:\xampp\htdocs\script.inc (листинг 5.25) 
и подключим его с помощью оператора require (листинг 5.26). 


Листинг 5.25. Содержимое файла script.inc 


<?php 
function sum($x, $y) { 
return ($x + $y); 


?> 
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Листинг 5.26. Использование оператора require 


<?рһр 

require ('script.inc'); 

// require ('C:\\xampp\\htdocs\\script.inc!'); 
$x = 5; 

$y = 10; 

$var = ѕит($х, $y); 

echo $var; // 15 


Создать файл script.inc можно, например, с помошью Notepad++. Следует отметить, 
что подключаемый файл может иметь любое расширение, хотя обшепринято давать 
подключаемым файлам расширение inc (от include). 


Попробуем открыть файл scriptinc с помощью УУер-браузера, набрав в адресной 
строке: http://localhost/script.inc. Отображаем исходный НТМІ.-код и видим 
содержимое файла зспр пс: 
<?php 
function sum($x, $y) { 

return ($x + $y); 


) 
?> 


По этой причине необходимо размещать включаемые файлы в каталоге, доступном 
только для сценария, но недоступном через Интернет. При установке и настройке 
РНР мы указали местонахождение включаемых файлов в директиве include path 
файла php.ini: 


include path=". ;C:/xampp/php/includes;C:/xampp/php/PEAR" 

Здесь через точку с запятой указано три места для поиска включаемых файлов: 
П . (точка) — в том же каталоге, что и исполняемый файл; 

П c:\xampp\php\includes — в каталоге includes; 


П c:\xampp\php\PEAR — в каталоге PEAR. 


Иными словами, не найдя включаемого файла в том каталоге, где расположен ис- 
полняемый файл, интерпретатор выполнит поиск в каталоге includes (СХхатррі 
php\includes), а затем в каталоге PEAR (С\хатрр\рһр\рРЕАК). 


Можно также сохранить включаемый файл с расширением php (в этом случае ис- 
ходный РНР-код не будет отображаться в окне \МеБ-браузера, но будет выполнен 
на стороне сервера) или добавить в файл .Массезз запрет доступа к файлам с pac- 
ширением inc (в этом случае \еБ-браузер получит ошибку 403): 


<Files "*.inc"> 
Require all denied 
</Files> 
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Если включаемый файл содержит исполняемый код, то указывать РНР-дескрип- 
торы нужно обязательно. Иначе РНР-код будет выведен как обычный текст, а при 
вызове определенных в нем функций отобразится сообщение об ошибке: 


function sum($x, $y) { return ($x + $y); } 


Fatal error: Uncaught Error: Call to undefined function sum() in 
C:\xampp\htdocs\index.php:5 Stack trace: #0 {main} thrown in 
C:\xampp\htdocs\index.php on line 5 


Иными словами, во включаемом файле может и не быть кода PHP. Для примера 
вынесем верхний колонтитул и функцию вша() в файл header.inc (листинг 5.27), а 
нижний колонтитул — в файл Ююоіегіпс (листинг 5.28). Затем подключим эти файлы 
к основному сценарию (листинг 5.29). 


Листинг 5.27. Содержимое файла header.inc 


<!DOCTYPE html> 

<html lang="ru"> 

<head> 
<meta charset="utf-8"> 
<title>ðĝyukumn</title> 

</head> 

<body> 

<?php 

function sum($x, $y) { 


return ($x + $y); 


?> 


Листинг 5.28. Содержимое файла footer.inc 


</body> 
</html> 


Листинг 5.29. Размещение НТМЕ-кода во включаемом файле 


<?php 

require ("header.inc"); 

$x = 5; 

$y = 10; 

$уаг = вша(5х, $y); 

echo "<р>Результат: {$var}</p>\n"; 
require ("footer.inc"); 


B листинге 5.30 приведен результируюший НТМІ.-код, сформированный после вы- 
полнения программы из листинга 5.29. 
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Листинг 5.30. Результируюший НТМЕ-код 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<title>ðyukunmn</title> 
</head> 
<body> 
<р>Результат: 15</p> 
</body> 
</html> 


Таким способом можно сформировать шаблоны для множества страниц. Интерпре- 
татор, встретив оператор require, сделает содержимое включаемого файла частью 
страницы. Если файл не может быть загружен, то оператор генерирует фатальную 
ошибку, и сценарий прекращает работу. 


Вместо оператора require можно использовать оператор include. Если включаемый 
файл не найден, оператор выведет сообщение об ошибке, но сценарий будет вы- 
полняться далее. Если этот файл содержит функции, то каждый вызов функции из 
него также будет генерировать ошибку. 


Оператор include возвращает true, если файл загружен, и Ға1зе-- в случае ошиб- 
ки. Подавить сообщение об ошибке можно с помощью оператора е (листинг 5.31). 


Листинг 5.31. Подавление сообщения об ошибке 


<?php 

if ((@include ("Һеадег.іпс')) == true) { 
5Х = 5; 
$у = 10; 


буаг = зат($х, $y); 
echo "<р>Результат: {$var}</p>\n"; 
} 


require ('footer.inc'); 


5.10.4. Операторы require_once n include_once 


Операторы require once И include once работают точно так же, как require И 
include. Однако перед включением файла интерпретатор проверяет, включался ли 
уже этот файл или нет. Если да, то файл не будет подключен. Операторы имеют 
следующий формат: 


теао1ге опсе(<Путь или имя файла>) 


require_once <Путь или имя файла> 


іпсілде опсе(<Путь или имя файла>) 


include_once <Путь или имя файла> 
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Пример: 


<?php 
require_once ('header.inc'); 


$var = sum(5, 7); 
echo "<р>Результат: {$var}</p>\n"; 
include_once ('footer.inc'); 


Применять операторы require once И include_once удобно при разработке больших 
проектов, т. к. в одном из предшествующих сценариев включаемый файл, возмож- 
но, уже был подключен. Подключение одного файла дважды может привести 
к ошибкам. 


5.10.5. Проверка существования функции 


Вызов несуществующей функции, а также повторное определение существующей 
функции, приведет к ошибке. Проверить существование встроенной или пользова- 
тельской функции позволяет функция function ехізез(), имеющая такой формат 
вызова: 


function exists (string $function name) : bool 
Название проверяемой функции указывается в виде строки без круглых скобок. 


Если функция существует, то возвращается значение true, в противном случае — 
значение false (листинг 5.32). 


Листинг 5.32. Пример использования функции function exists () 


<form асііоп="<?7=$ ЗЕКУЕК ['СКІРТ МАМЕ '] ?>"> 
<input type="text" папе-"паше Ғипс"> 


<input type="submit" уа1ае="Проверить"> 
</form> 

<?php 

if (isset($_GET['name_func'])) { 


if (function exists ($ СЕТ ['пате Ёџпс'])) { 

echo "Функция ' . $_GET['name_func'] . ' сушествует"; 
} 
else { 

echo "Функции". $_GET['name_func'] . ' нет"; 


5.10.6. Вывод всех доступных сценарию функций 


Функция дес defined ЕипсЕ1опз() позволяет получить массив с названиями всех 
определенных функций. Формат функции: 


get_defined_functions ( [Фоо1 $ехс1аае disabled=false]) : array 
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Пример: 

<?php 

function print _ message ($msg) { 
echo $msg; 


} 
print_r(get_defined functions ()); 


Примерный результат: 


Array ( 
[internal] => Array 


( 


о 


=> zend version 
=> func_num args 
func дес ағд 
=> Гипс деб агаз 


ae (ә № Н+ 
| 
У 


=> strlen 


) 
[user] => Array 
( 
[0] => print _ message 


) 


Функция get loaded extensions () возвращает массив всех загруженных модулей, 
а get_extension Ғипсв() — массив всех функций в модуле, заданном в качестве 
параметра. Код листинга 5.33 позволяет получить список всех доступных для сце- 
нария функций с группировкой по модулям. 


Листинг 5.33. Получение списка всех функций с группировкой по модулям 


<?php 
Şextensions = дее Іоадеа extensions (); 


foreach ($extensions as $module) { 
echo "<b> {$module}</b><br>\n"; 
echo "<ul>\n"; 
Şfunctions = get_extension _funcs (strtolower ($module) ) ; 
foreach ($functions as $name) { 
echo "<li>{$name} ()</li>\n"; 
} 


echo "</ul>\n"; 


5.10.7. Обьявление типов параметров 


При описании функции перед именем параметра допускается указание типа дан- 
ных. Если тип не задан, то параметр может принимать данные любого типа: 
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function test ($уаг) { 
var_dump ($уаг); 
} 
test (10); // іпё (10) 
сезі (10.5); // Е1оаЕ (10.5) 
test('str'); // string(3) "str" 


Если перед именем параметра добавить тип, 
функции, будут преобразованы к этому типу 
генерируется исключение ТуреЕггог: 


function Жезе(іпіе $уаг) { 
уас Яшар(буак); 


} 


test (10); // іпе(10) 
test (10.5); // іпё (10) 
севЕ(110"); // 106 (10) 
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то данные, указанные при вызове 
. Если преобразовать невозможно, 


// test('str'); // Fatal error: Uncaught Туре 


Error 


Помимо указания типа параметра, можно задать тип возврашаемого функцией зна- 
чения. В этом случае после закрываюшей круглой скобки добавляется двоеточие и 


тип данных: 


function test ($var) : int { 
return $var; 


} 


уаг дӘшпр(%4ев%(10)); // 10% (10) 
var_dump (test (10.5)); // int (10) 
var _dump (test('10')); // int (10) 
// var dump (test ('str')); // Fatal error: Uncaught TypeError 


Kak видно из результата, возвращаемые данные преобразуются к указанному типу. 


Если преобразование невозможно, то генерируе 


Если тип возвращаемого значения не указан, то 
любого типа: 


function test ($var) { 
return $var; 


} 


уаг Әшпр(%4ев%(10)); // іпё (10) 

var dump (test (10.5)); // float(10.5) 

var dump (test ('10')); // string (2) "10" 
var dump (test ('str')); // зЕхлра (3) "str" 


TCA исключение TypeError. 


функция может возврашать данные 


В описании функции можно указать следующие типы данных: 


П bool — логический тип данных; 
O int — целые числа; 
П float — вещественные числа; 


ОС string — строка; 
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O ахгау — массивы; 

С iterable — объекты, поддерживающие итерации (например, массивы); 
П callable — функции обратного вызова; 

С имя класса или интерфейса. 


Если функция ничего не возвращает, то после двоеточия можно указать ключевое 
СЛОВО void: 
function print message ($msg) : void { // Функция ничего не возвращает 

echo $msg; 


} 


ргіпё теѕѕаде ('Сообщение'); 


5.10.8. Строгая типизация 


Итак, если перед именем параметра добавить тип, то данные, указанные при вызове 
функции, по умолчанию будут преобразованы к этому типу. Если преобразование 
невозможно, то генерируется исключение ТуреЕггог: 


function test(int $var) : int { 
var dump ($уаг); 
return $var; 


} 


test (10); // int(10) 
test (10.5); // int(10) 
test(Ir0T); // іпе(10) 


Однако если включен режим строгой типизации, то типы данных преобразовы- 
ваться не будут. Если тип в описании функции не соответствует типу данных при 
вызове, сразу генерируется исключение ТуреЕггог. Аналогичная ситуация будет 
при указании типа возвращаемого функцией значения. Из этого правила есть одно 
исключение: данные типа int можно передать вместо ожидаемого типа float, Т. к. 
преобразование выполняется без потерь. 


Включить режим строгой типизации позволяет следующая инструкция, располо- 
женная в самом начале файла сразу после открывающего РНР-дескриптора: 


declare (strict_types=1) ; 


ПРИМЕЧАНИЕ 


Не забывайте сохранять файлы в кодировке ОТЕ-8 без BOM, в противном случае мет- 
ка порядка байтов (сокрашенно ВОМ) приведет к фатальной ошибке. 


Строгая типизация включается для отдельного файла и распространяется на вызовы 
функций, совершенные из этого файла, а не на функции, обьявленные в этом фай- 
ле. Режим включает дополнительную проверку только для типов bool, int, float и 
string. Невозможность преобразования других типов приведет к исключению 
ТуреЕггог вне зависимости от того, включен строгий режим или нет. 
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Пример: 


<?php 
declare (ѕігісі іуреѕ=1); 


function test(int $var) : int { 
var_dump ($уаг); 
return $var; 


} 


test (10); // int (10) 
// +ез® (10.5); // Fatal error: Uncaught ТуреЕггог 
// test('10'); // Fatal error: Uncaught ТуреЕггог 


Часто значение null используется для пропуска параметра или для возврата значе- 
ния при ошибке. Чтобы иметь возможность передавать или возвращать это значе- 
ние при включенном режиме строгой типизации, нужно перед типом указать знак 
вопроса: 


<?php 
declare (strict_types=1) ; 


function test(?int $var) : ?int { 
уас dump ($уаг); 
return $var; 

} 

test (10); // int (10) 

test (null); // NULL 


Может возникнуть вопрос: нужно ли использовать режим строгой типизации? 3a- 
чем лишние сложности, если типы могут преобразовываться автоматически? Ответ 
будет однозначным. На этапе написания и отладки программы режим строгой 
типизации должен быть включен в обязательном порядке, так же как и вывод всех 
предупреждающих сообщений! Поверьте, это убережет вас от бессонных ночей при 
поиске ошибок, которые то проявляются, то нет. Учитесь преобразовывать типы 
данных явным образом, не полагаясь на автоматический режим. Когда программа 
написана и отлажена, тогда режим строгой типизации, а также вывод предупреж- 
дающих сообщений в Web-6pay3ep можно отключить. 


5.10.9. Способы передачи параметров 


Как вы уже знаете, после названия функции внутри круглых скобок указываются 
параметры через запятую. Если функция не принимает параметров, то указываются 
только круглые скобки. Название параметра является локальной переменной. Эта 
переменная создается при вызове функции, а после выхода из функции она удаля- 
ется. Таким образом, локальная переменная видна только внутри функции и ее зна- 
чение между вызовами не сохраняется. 


При вызове функции указывается ее название, после которого внутри круглых ско- 
бок передаются значения. Количество параметров в описании функции должно 
совпадать с количеством параметров при вызове. Переданные значения присваива- 
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ются переменным, расположенным в той же позиции в описании функции. Так, при 
вызове функции sum(10, 20) (формат sum($x, $у)) переменной $x будет присвоено 
значение 10, а переменной $у — значение 20. Если функция не принимает парамет- 
ров, то указываются только круглые скобки. 


В функцию передается копия значения переменной, поэтому изменение значения 
внутри функции не затронет значения исходной переменной. Пример передачи 
параметра по значению приведен в листинге 5.34. 


Листинг 5.34. Передача параметра по значению 


function test(int $x, array $a) : void { 
$x = $x + 20; // Значение вне функции не сохраняется! 
Ѕа [0] = 55; // Исходный массив не изменяется! 

} 

5п = 5; 

Ѕагг = [ 10 ]; 


беѕі ($п, агг); 

// Значения не изменились! 

ргіпе г($п); 75 

ргіпе к($агг); // Array ( [0] => 10) 


Если внутри функции нужно иметь возможность изменять значение исходной 
переменной, то в описании функции перед именем параметра следует указать сим- 
вол ссылки & (листинг 5.35). 


Листинг 5.35. Передача параметра по ссылке 


function test(int &$x, array 6ба) : void 1 
$x = $x + 20; // Изменит значение исходной переменной! 
$а[0] = 55; // Исходный массив изменится! 

} 

$п = 5; 

Ѕагг = [ 10 ]; 


беѕі ($п, агг); 

// Значения изменились! 

ргіпе г($п); // 25 

ргіпе к($агг); // Array ( [0] => 55) 


5.10.10. Способы возврата значений 


При возврате значения из функции ситуация аналогичная -- по умолчанию воз- 
врашается копия значения (листинг 5.36). 


Листинг 5.36. Возврат результата по значению 


function test(int &$х) : int { 
$x = $x + 20; // Изменит значение исходной переменной! 
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return $x; // Возвращается копия значения! 
} 
$0 = 5; 
$k = test ($n); 
print_r($n); // 25 
print_r ($k); 7/28 
$n = 11; 
$k = 88; 
print_r($n); // 11 
ргіпе г($К); // 88 


Чтобы вернуть значение по ссылке, следует перед названием функции указать сим- 
вол ссылки & (листинг 5.37). Но этого недостаточно! Нужно дополнительно указать 
символ ссылки & перед названием функции при вызове. 


Листинг 5.37. Возврат результата по ссылке 


function &test(int 65х) : int { 
$x = $x + 20; // Изменит значение исходной переменной! 
return $x; // Возвращается ссылка! 
} 
$0 = 5; 
$k = &test ($n); // Символ & обязателен! 
ргіпе г(ӛп); // 25 
ргіпе г(5К); // 25 
$n = 11; 
$k = 88; 
ргіпё г(5п); // 88 (значение изменилось!) 
ргіпе г(5К); // 88 


ПРИМЕЧАНИЕ 


Используйте способ возврата значения по ссылке только тогда, когда вы понимаете, 
что делаете. В большинстве случаев лучше применять способ возврата, используе- 
мый NO умолчанию. 


5.10.11. Переменное число параметров в функции 


Функции func дес агодѕ() И Ғипс деф ага() позволяют получить доступ ко всем 
параметрам, переданным функции, а функция func num агав() дает возможность 
определить обшее число переданных параметров (листинг 5.38). 


Листинг 5.38. Определение числа переданных параметров 


function sum($x, $y) { 
echo "Число параметров: ' . func_num args() . "Ап"; 
echo 'Значения: '; 
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ргіпё к(Ғипс дек агдз()); 

return Гипс дес агд(0) + Ғипс декс аға(1); 
} 
echo sum(10, 20); // 30 


Результат: 


Число параметров: 2 
Значения: Array 
( 
[0] => 10 
[1] => 20 
) 
30 


Какой в этом смысл? Дело в том, что РНР поддерживает переменное число пара- 
метров в функции. При использовании таких функций можно передать нашей 
функции больше параметров, чем первоначально объявлено. Можно, например, 
просуммировать сразу несколько чисел, а не только два (листинг 5.39). 


Листинг 5.39. Переменное число параметров в функции 


function sum ($x, $y) { 
$result = 0; 
$count = Еапс пом args (); 
for ($i = 0; $i < $count; $i++) { 
$result += func деб агро ($i); 
} 
return $result; 


} 
echo sum(5, 6, 7, 20); // 38 


Такой же результат можно получить, используя функцию func get args() (лис- 
тинг 5.40). 


Листинг 5.40. Использование функции func дек агоз () 


function sum($x, $y) { 
$result = 0; 
foreach (func get_args() as $value) { 
$result += $value; 


} 


return $result; 


} 
echo sum(5, 6, 7, 20); // 38 


До версии PHP 5.6 никакого способа обозначить переменное число параметров не 
было. Но, начиная с версии 5.6, перед названием переменной можно указать много- 
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точие (...). В этом случае переменная становится массивом, через который дос- 
тупны все значения (листинг 5.41). Использовать функции func get ага5(), 
func дек агд() И func num агаз() в этом случает не нужно. Следует учитывать, что 
параметр с многоточием должен быть расположен в списке параметров последним. 


Листинг 5.41. Переменное число параметров в функции 


function зим (10 $n, int ...$numbers) : int { 
$result = $n; 
foreach ($numbers as $value) { 
$result += $value; 
| 
return $result; 
} 
echo sum(5); // 5 
echo өша(5, 6, 7, 20); // 38 


ВНИМАНИЕ! 


Если перед названием параметра указано многоточие, то при вызове значение можно 
не указывать. 


5.10.12. Распаковка массива 


Символ многоточия можно также использовать для распаковки массива при пере- 
даче значений в функцию при вызове (листинг 5.42). 


Листинг 5.42. Распаковка массива при передаче в функцию 


function sum($x, $y) { 
return $x + $y; 

} 

Ѕагг = (5, 7]; 


echo sum(...$arr); 12 
echo эшт(...[3, 81); // 11 
echo вша(... ІЗ, 8, 9]); // 11 


Если функция возврашает массив, то для его распаковки можно использовать опе- 
ратор list () (листинг 5.43). 


| Листинг 5.43. Распаковка при возврате массива 


function test() : array { 
return array(1, 2, 3); 

} 

115%(5х, 5у, 52) = test(); 
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есһо 5х; //1 
есһо 5у; // 2 
есһо 52; 7753 


5.10.13. Глобальные и локальные переменные 


Глобальными называют переменные, обьявленные вне функции. В РНР глобальные 
переменные видны в любой части программы, кроме функций. 


Локальные переменные объявляются внутри функции и видны только в теле функ- 
ции. Переменные, указанные в качестве параметров, также являются локальными. 
Если имена локальной и глобальной переменной совпадают, то все операции внут- 
ри функции осуществляются с локальной переменной, а значение глобальной не 
изменяется. 


Рассмотрим область видимости переменных на примере (листинг 5.44). 


Листинг 5.44. Глобальные и локальные переменные 


function test($z) { // $Z локальная переменная 
$x = 5; // Локальная переменная 
echo "Локальная переменная $x = '. $x . "<рг>\п"; 
echo "Локальная переменная 52 = ' . 52 . "<рг>\п"; 
echo 'Глобальная переменная $y = ' . ($y ?? 'NULL'); 


echo ", т. е. не видна внутри функции<рг>\п"; 


$x = 10; // Глобальная переменная 

echo "Глобальная переменная $x = ' . $x . "<br>\n"; 

$y = 7; // Глобальная переменная 

test (33); 

echo "Вызов функции<рг>\п"; 

echo "Глобальная переменная $x осталась = ' . $x . "<br>\n"; 
echo "Локальная переменная $2 = ' . ($z ?? 'NULL'); 

есһо ', т. е. не видна вне тела функции"; 


В окне МеБ-браузера получим следующий результат: 


Глобальная переменная $х = 10 


Локальная переменная $х = 


Локальная переменная 52 = 33 
Глобальная переменная $y = NULL, т. е. не видна внутри функции 
Вызов функции 


Глобальная переменная $х осталась = 10 


Локальная переменная $z = NULL, т. е. не видна вне тела функции 


Как видно из результата, переменная $z, объявленная в параметре функции test (), 
не доступна вне функции. Объявление внутри функции локальной переменной $х 
не изменило значения одноименной глобальной переменной. А глобальная пере- 
менная $y не видна внутри функции test (). 
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Для того чтобы глобальная переменная была видна внутри функции, необходимо 
перед именем переменной в теле функции указать ключевое слово global. Про- 
демонстрируем это на примере (листинг 5.45). 


Листинг 5.45. Использование глобальных переменных внутри функции 


function test($z) { 


global $x; 
echo "Глобальная переменная \$x внутри функции = {$x}<br>\n"; 
5х t= 52; 

} 

$х = 10; 

echo "Глобальная переменная \$х вне функции = {$x}<br>\n"; 

сезі (33); 


echo "Вызов функции<рг>\п"; 


echo "Глобальная переменная \$x после функции = {$x}<br>\n"; 


В окне МеБ-браузера получим следующий результат: 


Глобальная переменная 5х вне функции = 10 
Глобальная переменная 5х внутри функции = 10 
Вызов функции 


Глобальная переменная 5х после функции = 43 


Внутри функции к глобальной переменной можно обратиться через суперглобаль- 
ный массив $GLOBALS (листинг 5.46). 


Листинг 5.46. Использование суперглобального массива $GLOBALS 


function ёеѕї ($2) { 
echo "Глобальная переменная \5х внутри функции = "; 
echo $GLOBALS['x'] . "<br>\n"; 
$GLOBALS['x'] += $z; 


5х - 10; 

echo "Глобальная переменная \$х вне функции = {$x}<br>\n"; 
test (33); 

echo "Вызов функции<рг>\п"; 


echo "Глобальная переменная \$x после функции = {$x}<br>\n"; 


В итоге, в окне \МеБ-браузера получим такой же результат: 


Глобальная переменная $х вне функции = 10 
Глобальная переменная $х внутри функции = 10 
Вызов функции 


Глобальная переменная $х после функции = 43 
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5.10.14. Статические переменные 


Если внутри функции обьявлена статическая переменная, то после завершения 
работы функции она не будет удалена и сохранит свое значение. Объявляется 
статическая переменная с помощью ключевого слова static, которое указывается 
перед именем переменной. 


Выведем все четные числа от 2 до 100 (листинг 5.47). 


Листинг 5.47. Использование статических переменных 


function ёеѕї ($0) { 
static $var = 0; 
$var += $n; 
echo "{$var}<br>\n"; 


} 
for ($i = 0; $i < 50; $i++) test(2); 


5.10.15. Анонимные функции 


Помимо обычных функций язык РНР позволяет использовать анонимные функции. 
Анонимная функция описывается по следующей схеме: 


<Переменная> = function ([<Параметры через запятую>]) 
[use (<Переменные>)] : [<Тип>] { 
<Тело функции> 
[return[ <Возвращаемое значение>1; | 
}; 


Это почти как при описании обычной функции, но анонимная функция не имеет 
названия, и создаваемый объект присваивается какой-либо переменной, через кото- 
рую можно вызвать функцию. Обратите внимание: после закрывающей фигурной 
скобки обязательно нужно указать точку с запятой. 


Пример создания и вызова анонимной функции показан в листинге 5.48. 


Листинг 5.48. Анонимные функции 


$sum = function (int $x, int $y) : int 1 
return $x + $y; 

}; 

echo $sum(5, 7); // 12 


Анонимная функция становится видимой только после описания. Внутри блока по 
умолчанию видны лишь локальные переменные, указатель $this и суперглобаль- 
ные массивы. Для обращения к глобальным переменным нужно воспользоваться 
ключевым словом global. Анонимные функции позволяют захватить значения 
переменных в родительской области видимости — для этого нужно указать пере- 
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менные через запятую внутри круглых скобок после ключевого слова use. Давайте 
рассмотрим области видимости анонимных функций на примере (листинг 5.49). 


Листинг 5.49. Области видимости при использовании анонимных функций 


ба = 20; // Значение до описания функции 

$b = 33; 

$test = function () use($a) : void { 
global $b; 
echo "Глобальная переменная $a = ' . ($a ?? 'NULL'); 
echo ", т. е. значение до описания функции<рг>\п"; 
echo "Глобальная переменная $b = ' . ($b ?? 'NULL'); 
echo ", т. е. значение после описания функции<рг>\п"; 

}; 

$a = 2; // Изменили значение после описания функции 

$b = 3; 

$test(); 


В окне Web-6paysepa получим следующий результат: 


Глобальная переменная $a = 20, т. е. значение до описания функции 


Глобальная переменная $b = 3, т. е. значение после описания функции 


Как видно из примера, место описания анонимной функции и место ее вызова мо- 
гут быть расположены в разных областях видимости. При обращении к глобальной 
переменной мы видим ее значение на момент вызова, тогда как обращение к пере- 
менной в родительской области видимости содержит значение на момент описания 
функции. Если при вызове нужно иметь доступ к текущему значению переменной, 
то перед названием переменной нужно указать символ ссылки &: 


$test = function () use(&$a) : void { 
// 
}; 


Анонимную функцию можно обернуть в круглые скобки и сразу вызвать: 


$value = (function ($x, $y) { 
return $x + $y; 

}) (20,-5); 

echo $value; // 15 


Анонимные функции в языке РНР являются объектами класса Closure. Это не 
сложно заметить, если вывести информацию с помощью функции var dump (): 


var_dump ($test) ; 


Результат: 


object (С1оѕоге) #1 (1) 1 
["static"]=> 


594 Гпава 5 


аггау(1) { 
Гта"т=> 
«іпе (2) 


5.10.16. Функции обратного вызова 


Функцию можно передать другой функции в качестве параметра. Такие функции 
называются функциями обратного вызова. 


В качестве типа данных перед названием параметра можно указать ключевое слово 
callable. При вызове название функции задается в виде строки. Вместо етроки 
можно передать анонимную функцию. 


Вызов функции осуществляется с помощью круглых скобок, внутри которых пере- 
даются значения параметрам, или следующих функций: 


call _ user _ func (callable $са11раск[, mixed $parameter[, 
mixed $...]]) : mixed 
call user func array (callable $callback, array $param arr) : mixed 


Пример использования функций обратного вызова: 


function change ($x, $y, callable 5са11Баск) { 
echo call _user_func ($callback, $x, $y); 
echo call _ user Ёџпс аггау($са11раск, array ($x, 5у)); 


} 


Проверить, может ли переданное значение быть вызвано в качестве функции, NO- 
зволяет функция із са11ар1е(). Функция возвращает значение true, если может 
быть вызвана, и false — в противном случае. Формат функции: 


із са11ар1е (mixed $уаг[, bool $ѕупёах оп1у=Ёа1ѕе[, 
string &є$са11арІе пате]]) : bool 


Еще один пример использования функций обратного вызова показан в листин- 
ге 5.50. 


Листинг 5.50. Функции обратного вызова 


function change ($x, $y, callable 5са11Баск) { 
return $callback($x, $y); 


$add = function ($a, $b) { 
return $a + $b; 

}; 

function зар (Ѕа, $b) { 
return За - $b; 


} 
// Передача названия в виде строки 
echo сһапде(2, 1, 'sub'), "\n"; // 1 
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// Передача анонимной функции 

echo сһапде(2, 1, $ааа), "Ап"; // 3 

echo сһапде(2, 1, function (ба, $b) ( 
return $a * $b; 

к, //2 


5.10.17. Функции-генераторы 


Функцией-генератором называется функция, которая может возврашать одно зна- 
чение из нескольких значений на каждой итерации. Приостановить выполнение 
функции и превратить функцию в генератор позволяет ключевое слово уіе14. 
В качестве примера напишем функцию, которая возводит элементы последователь- 
ности в указанную степень (листинг 5.51). 


Листинг 5.51. Функции-генераторы 


function test($x, $y) { 
for ($1 = 1; $1 <= $х; $1++) { 
уіе1а $1 ** 5у; 


} 

$obj = test (10, 2); 

foreach ($obj аз $value) { 
echo $value, " "; 

} // 149 16 25 36 49 64 81 100 

echo "\п"; 

$067) = test (10, 3); 

foreach ($06) аз $value) { 
echo $value, " "; 

} // 1 8 27 64 125 216 343 512 729 1000 


После вызова функции-генератора возвращается объект Generator, поддерживаю- 
щий однонаправленные итерации. На каждом шаге возвращается значение, после 
чего состояние генератора сохраняется. При следующем вызове функции выполне- 
ние возобновляется с места, на котором прервалось. Таким способом можно сгене- 
рировать бесконечное число значений (по одному на каждой итерации), не опасаясь 
превысить лимит оперативной памяти. 


Возвращаемый объект содержит метод current (), с помощью которого можно MO- 
лучить текущее значение, метод кеу() — возвращающий текущий ключ, метод 
next () — для перехода к следующему значению, а также метод уа11а() — позво- 
ЛЯЮЩИЙ проверить наличие значения. 


Вот пример использования этих методов: 


борі = ёеѕі (3, 2); 
while ($орј->уа1іа()) { 
echo $obj->key() . '=&gt;' . $0р)->сиггепё (), " "; 
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$obj->next (); 
} // 0->1 1->4 2->9 
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После ключевого слова yield можно указать не только значение, но и пару 


ключ/значение (листинг 5.52). 


Листинг 5.52. Возврат пары ключ/значение 


function test ($x, $y) { 
for ($1 = 1; $1 <= $х; $1++) { 
yield бі => бі ** $y; 


} 

борі = test (5, 2); 

foreach ($06) аз $key => $value) { 
echo $key . '=&9Е;' . $value, " "; 

} // 1=>1 2=>4 3->9 4=>16 5=>25 


Кроме того, после ключевого слова yield может быть указано ключевое слово from, 
после которого задается другая функция-генератор или объект, поддерживающий 


итерации — например, массив (листинг 5.53). 


Листинг 5.53. Инструкция yield from 


function test() { 
yield 1; 

а Ғғоп (2, 3, 41; 

yield from test2(); 

а 7; 


уіеі 


уіе1 
} 
function test2() { 

yield 5; 

yield 6; 


$06) = test (); 

foreach ($obj as $value) { 
echo $value, " "; 

} //1234567 


Функция iterator to аггау() позволяет скопировать значения из объекта, поддер- 


живающего итерации, в массив. Формат функции: 


iterator to array (Traversable $iterator[, bool $азе Кеуз=егае]) 


При использовании инструкции yield from следует помнить, что она не сбрасывает 
ключи. В результате некоторые ключи могут пересекаться, что повлечет перезапись 
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уже записанных значений. Чтобы этого избежать, следует в параметре $use keys 
явным образом указать значение false (листинг 5.54). 


Листинг 5.54. Функция iterator to array () 


function test() { 
yield 1; 
yield from test2(); 
yield 4; 

} 

function test2() { 
yield 2; 


yield 3; 
} 
Şarr = iterator to_array (test ()); 
[0] => 2 [1] => 4 ) 
test(), false); 
[0] => 1 [1] => 2 [2] => 3 [3] => 4 ) 


print_r($arr); // Array 
$arr = iterator to array 


( 
( 
( 
print г($агк); // Array ( 


Класс Generator содержит метод send (), с помощью которого можно передать 3Ha- 
чение в генератор. Формат метода: 


public зепа (mixed $value) : mixed 

Получить переданное значение внутри функции можно так: 

$status = yield $i => $i ** $y; 

В предыдущих версиях РНР нужно было добавлять круглые скобки: 
$status = (yield бі => $i ** $y); 


Пример передачи значения в генератор приведен в листинге 5.55. 


Листинг 5.55. Передача значения в генератор 


function test ($x, $y) { 
for ($i = 1; $i <= $x; $i++) { 
$status = yield $i => $i ** $y; 
if ($status === true) break; 


} 

$obj = test (5, 2); 

foreach ($obj as $key => $value) { 
echo $key . '=Į&gt;' . $value, " "; 
if ($key > 2) $obj->send (true); 

} // 1=>1 2=>4 3=>9 


Функция-генератор может возврашать какое-либо значение, которое доступно 
через метод getReturn () (листинг 5.56). Обратите внимание: если поток управления 
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не дошел до инструкции return, TO При попытке вызвать метод будет сгенерирова- 
но исключение. 


Листинг 5.56. Метод getReturn () 


function test ($x, $y) { 
for ($i = 1; $i <= $x; $i++) { 
yield $i ** $y; 
} 
return 2; 
} 
$obj = test(5, 2); 
foreach ($obj as $value) { 
echo $value, " "; 
} // 149 16 25 
echo $obj->getReturn(); // 2 


5.10.18. Рекурсия 


Рекурсия — это возможность функции вызывать саму себя. При каждом вызове 
функции создается новый набор локальных переменных. Рекурсию удобно исполь- 
зовать для перебора объекта, имеющего заранее неизвестную структуру, или 
выполнения неопределенного количества операций. Типичным применением ре- 
курсии является вычисление факториала числа (листинг 5.57). 


Листинг 5.57. Вычисление факториала 


<р><р>Вычисление факториала</р><рг><рг> 
Введите число</р> 

<form action="<?=$_SERVER[ 'ЗСВТРТ МАМЕ" ] ?>"> 
<input type="text" name="fact"> 


<input type="submit" value="0K"> 
</form> 
<?php 
function factorial(float $x) : float { 
1Е ($х <= 1) return 1; 
else return ($x % Еасбог1а1 ($х - 1)); 


if (ізек(5 СЕТ['Ғасё'])) { 
$Ғасі = $ СЕТІ ҒасЕ"1; 
if (! preg_match('/^[0-9]+$/su', $fact)) 1 


echo 'Необходимо ввести целое число!"; 


еізе { 
echo "Факториал числа {$fact} = " . Ғасбогіа1( (int)$fact ); 


?> 
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5.11. Пространства имен 


Предположим, у нас есть два модуля с названиями: тодше1 пс и тодше2.тс. Оба 
модуля содержат следующий код: 
<?php 
function sum($x, $y) { 
return $x + $y; 


} 
?> 


Если мы в основной программе попробуем подключить сразу два модуля: 


<?php 

require_once 'modulel.inc'; 
require_once 'module2.inc'; 

буаг = яша(5, 12); 

echo "<р>Результат: {$уаг}</р>\п"; 


то получим сообщение об ошибке: Fatal error: Cannot redeclare зит(), т. к. функ- 
ЦИЯ вшп() не может быть объявлена дважды. Подобная ситуация часто случается, 
когда мы пытаемся использовать чужой код. Что же делать в этом случае — если 
нужно использовать одноименные функции из разных модулей? 


Для решения этой проблемы в РНР версии 5.3 были введены пространства имен. 


5.11.1. Объявление пространства имен 


Пространство имен объявляется с помощью ключевого слова namespace ПО сле- 
дующим схемам: 


namespace <Имя>; 

namespace <Имя1>\<Имя2>\<ИмяМ> ; 
namespace <Имя> { 

} 

namespace <Имя1>\<Имя2>\<ИмяМ> { 
} 


ВНИМАНИЕ! 


Переменные, объявленные внутри пространства имен, добавляются в глобальное 
пространство имен, а не в текущее. Пространства имен работают только с классами, 
интерфейсами, функциями и константами. 


Следует учитывать, что инструкция namespace должна быть расположена в самом 
начале файла сразу после открывающего РНР-дескриптора. Исключением является 
инструкция declare, которая должна быть расположена раньше. Обычного текста 
перед открывающим РНР-дескриптором быть не должно. Не забывайте также со- 
хранять файлы в кодировке ОТЕ-8 без ВОМ, в противном случае метка порядка 
байтов (сокращенно ВОМ) приведет к фатальной ошибке. 
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Пример объявления пространства имен для модуля module1.inc приведен в листин- 
ге 5.58. 


Листинг 5.58. Объявление пространства имен (файл тоаше1. тс) 


<?php 
declare (strict_types=1) ; 
namespace modulel; 


function sum($x, $y) { 
return $x + $y; 


} 
?> 


Названия пространств имен могут состоять из нескольких частей. В этом случае 
названия подпространств приводятся через символ \. Чтобы название пространства 
имен было уникальным, лучше в названиях подпространств использовать части 
названия сайта в обратном порядке. Причем в файловой системе лучше создать со- 
ответствующую структуру каталогов. Например, файл module2.inc (листинг 5.59) 
следует разместить в каталоге С\хатрр\рћр\іпсіийеѕ\соп\ехатріе. 


Листинг 5.59. Объявление пространства имен (файл тоаше2. тс) 


<?php 
namespace com\example\module2; 


function sum($x, $y) { 
return $x + $y; 

} 

?> 


В одном файле допускается объявление сразу нескольких пространств имен. Кроме 
того, одно пространство имен может быть объявлено сразу в нескольких файлах. 
В качестве примера создадим модуль module3.inc с кодом из листинга 5.60. 


Листинг 5.60. Объявление нескольких пространств имен (файл тоашеЗ. тс) 


<?php 
namespace module3 { 
function test() { 


echo 'Пространство имен |. _ NAMESPACE _ . "<br>\n"; 


Е 


} 


namespace module1 { 
const МҮ CONST = 10; 
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namespace { // Глобальное пространство имен 
function print пеззаде ($msg) { 
echo $msg . "<br>\n"; 


} 
?> 


Обратите внимание: последняя инструкция namespace не имеет имени. В этом слу- 
чае все идентификаторы, обьявленные внутри фигурных скобок, добавляются 
в глобальное пространство имен. 


В листинге 5.60 мы также использовали константу МАМЕ5РАСЕ , которая содержит 
название текущего пространства имен в виде строки. В глобальном пространстве 
имен константа содержит пустую строку. 


5.11.2. Использование пространств имен 


Идентификаторы, добавленные в именованное пространство имен, больше не вид- 
ны в глобальном пространстве имен внутри основной программы. Единственный 
идентификатор, к которому мы можем обратиться после подключения всех ранее 
созданных модулей, — это функция print шеззаде(). В остальных случаях необхо- 
димо явным образом указать название пространства имен (листинг 5.61). 


| Листинг 5.61. Использование пространств имен (файл index.php) 


<?php 

require_once 'modulel.inc'; 

require_once 'com\\example\\module2.inc'; 
require_once 'module3.inc'; 


print пеззаде ("Глобальное пространство"); 


( 
ргіпі пеззаде (\modulel1\sum(5, 12)); // 17 
ргіпе пеззаде (\module1\MY_CONST) ; // 10 
ргіпі пеззаде (\com\example\module2\sum(2, 3)); // 5 
\module3\test(); // Пространство имен module3 


Чтобы явно указать, что функция print message () расположена в глобальном про- 
странстве имен, можно перед ее названием добавить символ \: 


\ргіпі шеззаде ("Глобальное пространство"); 


Это становится особенно полезно, если мы переопределяем встроенную функцию, 
но хотим вызвать ее внутри нашей функции. Давайте переопределим функцию 
date () внутри пространства имен подотет: 


function дағе() { 
return \date('d.m.y Н:1:5'); 
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Если мы в этом случае не укажем символ \, то получим рекурсивный вызов функ- 
ЦИИ date () из пространства имен module1, что приведет к фатальной ошибке. 


Вот пример вызова из основной программы: 


print message (\modulel1\date()); // 08.10.17 09:10:14 


Если символ \ в начале не указан, то к имени идентификатора автоматически 
добавляется название текущего пространства имен, поэтому внутри модулей при 
обращении к идентификаторам можно не указывать название текущего пространст- 
ва имен. Если в текущем пространстве имен идентификатор отсутствует, то выпол- 
няется поиск в глобальном пространстве имен. Исключением являются имена клас- 
сов, к которым всегда добавляется название текущего пространства имен и поиск 
в глобальном пространстве не производится. Поэтому перед встроенными классами 
необходимо указывать символ \: 


function дағе() { 
5ас = new \DateTime (); 
return $dt->format ('d.m.Y Н:1:5"); 


} 


Добавим в пространство имен module1 функцию test () и внутри нее вызовем функ- 
ЦИЮ sum() из Того же пространства имен: 


function test() { 
return sum(2, 3); 

} 

Вот пример явного указания пространства имен: 


function test() 1 
return \modulel1\sum(2, 3); 
} 


Для явного указания текушего пространства имен можно также воспользоваться 
ключевым словом namespace: 


function test() { 
return namespace\sum(2, 3); 


5.11.3. Инструкция use 


Что делать, если название пространства имен получилось очень длинным? Неужели 
такое длинное название нужно указывать перед каждым идентификатором? Для 
решения этой проблемы существует инструкция use, которая позволяет создать 
псевдоним или импортировать идентификатор в текущее пространство имен. Фор- 
мат инструкции use для пространств имен и классов: 


use <Пространство имен> [\<Класс>] [ аз <Псевдоним>]; 
Пример создания псевдонима для пространства имен com\example\module2: 


use com\example\module2 аз m2; 


Основы РНР. Создаем динамические И/еЬ-страницы 603 


После этой инструкции мы можем обратиться к функции sum() так: 


ргіпе пеззаде (m2\sum(2, 6)); 


Если оператор аз не указан, то создается короткое имя с названием класса или на- 
званием последнего подпространства: 


use com\example\module2; 

В этом случае можно использовать имя module2: 

print пеззаде (module2\sum(2, 7)); 

Пример импорта класса из глобального пространства имен: 


use DateTime; 


Инструкция изе позволяет создать псевдонимы сразу для нескольких пространств 
имен или классов. В этом случае они приводятся через запятую: 

use поаџ1е1 аз ml, module3 аз m3; 

C помощью инструкции use можно импортировать в текущее пространство имен 
функцию или константу. В этом случае используются следующие форматы: 


use function <Пространство имен>\<Функция> | аз <Псевдоним>]; 
use const «Пространство имен>\<Константа>[ аз <Псевдоним>]; 


Пример: 


use function modulel\sum; 
use const шоаџ1е1\Ммү CONST; 


Если нужно импортировать несколько классов, функций или констант, то удобно 
воспользоваться следующими форматами инструкции use: 


use <Пространство имен>\{<Класс 1>[ аз <Псевдоним 1>], 


<Класс N>[ аз <Псевдоним №]}; 


use function <Пространство имен>\{<Функция 1>[ аз <Псевдоним 1>], 


<Функция №1[ аз <Псевдоним №] }; 


use const «Пространство имен>\{<Константа 1>[ аз <Псевдоним 1>], 


<Константа N>[ ав <Псевдоним №] }; 
Пример импорта двух функций: 
use function module1\{date аз dt, test}; 
B дальнейшем указывать пространство имен перед названиями функций не надо: 


print message (dt ()); 
print _ message (test ()); 


Полный пример использования инструкции use приведен в листинге 5.62. 


Листинг 5.62. Инструкция use (файл index.php) 


<?php 
namespace main; 
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require_once 'modulel.inc'; 

require_once 'com\\example\\module2.inc'; 

require_once 'module3.inc'; 

// Импорт классов и создание псевдонимов для пространств имен 
use сом\ехатр1е\тоао1е? аз m2; 


use com\example\module2; 


use DateTime; 

use modulel as ті, module3 as m3; 

// Импорт функций и констант 

use function modulel\sum; 

use const шоаџ1е1\мү CONST; 

use function module1\{date as dt, test}; 


print _ message (sum(5, 12)); ЕЯ 
ргіпе пеззаде (1 \зит(3, 2)); // 5 
ргіпі пеззаде (Му СОМ$Т); // 10 
print message (m2\sum(2, 6)); // 8 
print message (module2\sum(2, 7)); ЖА? 
m3\test(); // Пространство имен module3 


$d = new раёеТіте (); 

ргіпе пеззаде ($d->getTimestamp ()); 

ргіпе пеззаде (dt ()); // 08.10.17 09:10:14 
print пеззаде (test ()); // 5 


5.12. Классы и объекты 


Объектно-ориентированное программирование (ООП) — это способ организации 
программы, позволяющий использовать один и тот же код многократно. Основным 
«кирпичиком» ООП является класс. Класс включает набор переменных (называе- 
мых полями или свойствами класса) и функций для управления этими переменны- 
ми (называемых методами). В совокупности свойства и методы называются члена- 
ми класса. После создания класса его название становится новым типом данных. 
Тем самым пользовательские классы расширяют возможности языка РНР. 


Основными понятиями ООП являются: 
O инкапсуляция — сокрытие данных внутри класса; 


О наследование — возможность создания производных классов на основе базового 
класса. При этом производный класс автоматически получает возможности ба- 
зового класса и может добавить новую функциональность или переопределить 
некоторые методы; 


п полиморфизм — смысл действия, которое выполняет одноименный метод, зави- 
CHT от объекта, над которым это действие выполняется. 


Что же должно быть представлено в виде классов, а что в виде методов или 
свойств? Если слово является именем существительным (автомобиль, телевизор, 
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кнопка и т. д.), то оно может быть описано как класс. Метод описывает действие, 
применяемое к объекту — например. начать движение, нажать кнопку, изменить 
цвет и т. д. Свойство предназначено для сохранения текущего состояния объекта и 
его характеристик — например, размер кнопки и ее цвет, признак, нажата она или 
нет. 


5.12.1. Создание класса и экземпляра класса 


Описание класса начинается с ключевого слова class: 


class <Имя класса> { 
// <Свойства и методы класса> 


} 


Пример создания класса с названием MyClass в пространстве имен main приведен 
в листинге 5.63. 


Листинг 5.63. Создание класса 


<?php 
namespace main; 


class MyClass { 


public $x = 10; // Свойство 
public function toString() { // Метод 
return 'МуС1аз$ $x = ' . $this->x; 


На основе класса можно создать множество объектов (экземпляров класса). При 
этом для каждого объекта создается свой набор локальных переменных. Класс 
можно сравнить с чертежом, а объект — с изделием, произведенным по этому 
чертежу. Чертеж всегда один, а вот изделий может быть бесконечное множество. 
Причем каждое изделие уникально и не зависит от других изделий. 


Для создания экземпляра класса предназначен оператор new. После оператора yka- 
зывается имя класса, к которому будет относиться этот экземпляр, и круглые скоб- 
ки. Внутри круглых скобок можно передавать некоторые параметры, задавая 
таким образом начальные значения свойствам класса: 


<Экземпляр класса> = new <Имя класса> ( [<Параметры>]); 
Создадим экземпляр класса MyClass: 
$obj = new MyClass (); 


Если класс расположен в пространстве имен, то перед именем класса можно ука- 
зать название пространства имен: 


бор) = new \таіп\МуС1аѕѕ(); 
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Или так: 


$obj = new патезрасе\МуС1аѕѕ (); 


Не следует забывать, что глобальные классы не видны внутри пользовательского 
пространства имен. Нужно обязательно указать символ \ перед именем глобально- 
го класса: 


$dt = new ХПағеТіпе(); 


Можно также импортировать имя глобального класса в текущее пространство имен 
с помощью инструкции use: 


use \DateTime; 
бас = new DateTime (); 


Создать экземпляр класса можно через переменную, содержашую название класса 
в виде строки. Причем, если класс расположен внутри пространства имен, то перед 
именем класса обязательно нужно указать название пространства имен: 


$name = 'main\\WMyClass'; 
борі = new $name (); 


Получить полное название класса с пространством имен можно так: 


echo MyClass::class; // main\MyClass 


После создания объекта в переменной сохраняется идентификатор объекта, а не 
сам объект. Таким образом, если присвоить значение одной переменной другой 
переменной, то мы не получим копию объекта. Мы получим лишь копию иденти- 
фикатора, который указывает на тот же самый объект: 


$obj = new MyClass (); 

// $9532 содержит копию идентификатора, а не копию объекта!!! 
$0672 = $0967; 

50542->х = 22; 

// Переменные ссылаются на один и тот же объект! 

echo $obj->toString(); // MyClass $x = 22 

echo $obj2->toString(); // MyClass $x = 22 


Чтобы создать копию объекта, нужно воспользоваться оператором с1опе: 


$obj = new MyClass (); 

// $9632 содержит копию объекта 

$0572 = clone $051; 

50542->х = 22; 

// Переменные ссылаются на разные объекты 
echo $obj->toString(); // MyClass $x = 10 
echo $obj2->toString(); // MyClass $x = 22 


При использовании оператора clone следует учитывать, что по умолчанию создает- 
ся поверхностная копия объекта. Это означает, что если объект содержит в свойст- 
вах идентификаторы других объектов, то при копировании мы получим лишь 
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копии идентификаторов. Чтобы создать полную копию объекта, нужно внутри 
класса определить метод со специальным названием сіопе() и внутри него само- 
стоятельно создавать копии объектов (листинг 5.64). 


Листинг 5.64. Создание полной копии объекта 


class А 1 
public $x = 10; // Свойство 
} 
class В { 
public $06) = null; // Свойство 
public function __construct() { // Конструктор 
$this->0obj = new А(); 
} 
public function _ с1опе() { 


$this->obj = clone $this->obj; 


$b 
$c = clone $b; 
$c->0bj->x = 5; 
echo $5р->орј->х; // 10 
echo 5с->ор1->х; // 5 


new B(); 


Для удаления экземпляра класса служит оператор unset (): 
unset (<Экземпляр класса>) 


Экземпляр класса можно удалить, присвоив переменной значение null: 


<Экземпляр класса> = null; 


5.12.2. Объявление свойств внутри класса 


Для создания свойства внутри класса применяется следующий синтаксис: 


<Область видимости> <Имя переменной со знаком $>[ = <Константа>]; 


В параметре <Область видимости> может быть указан один из модификаторов дос- 
тупа: 


o public — открытый. Свойство доступно для внешнего использования; 


С private — закрытый. Свойство доступно только внутри самого класса. Чаще 
всего свойства класса объявляются как закрытые; 


п protected — защищенный. Свойство недоступно для внешнего использования, 
но доступно для самого класса и для его потомков. 


Если модификатор доступа для свойства не указан, то интерпретатор выведет со- 
общение об ошибке. 


608 Гпава 5 


Модификаторы доступа предназначены для контроля значения свойств класса, 
которые используются только для внутренней реализации класса. Например, если 
в свойстве предполагается хранение определенных значений, то перед присвоением 
значения мы можем проверить соответствие значения некоторому условию внутри 
обшедоступного метода. Если же любой пользователь будет иметь возможность 
ввести что угодно, минуя нашу проверку, то ни о каком контроле не может быть и 
речи. Такая концепция сокрытия данных называется инкапсуляцией. 


Присвоить или получить значение свойства после создания объекта можно через 
экземпляр класса с помощью оператора ->: 


<Переменная>-><Имя свойства без знака $> = <Значение>; 


<Значение> = <Переменная>-><Имя свойства без знака 5>; 


ПРИМЕЧАНИЕ 


Если свойство с указанным названием не сушествует в классе, то вызываются маги- 
ческие методы _set() (присваивание значения) или сес() (получение значения). 
Описание этих методов приведено в разд. 5.12.17. 


Создадим класс Point с двумя общедоступными свойствами: $x и $y: 


class Point { 


0; 
0; 


püblic $x 


public $y 
} 


Теперь создадим экземпляр класса Point, присвоим свойствам значения, а затем 
получим их и выведем в окно \!еБ-браузера: 


$06) = new Роіпе(); 

Ѕорј->х = 10; 

$obj->y = 2; 

var dump ($06)->х); // іпе(10) 
маг dump ($obj->y); // 10% (2) 


Мы можем создать множество экземпляров класса Point, и каждый экземпляр 
будет иметь свои собственные значения свойств $х и $у, не зависящие от других 
экземпляров: 


$05) = new Роіпе(); 

50542 = new Роіпе(); 

Ѕорј->х = 10; 

$obj->y = 20; 

$obj2->x = 30; 

$obj2->y = 40; 

echo Ѕорј->х . ' ' . Ѕорј->у; // 1020 
echo $0obj2->x . '' . 5ор12->у; // 30 40 


Внутри одного класса допускается использование объектов другого класса. В ка- 
честве примера используем класс Point для описания координат прямоугольника 
внутри класса Rectangle (прямоугольник). 
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Вначале создадим класс Rectangle: 


class Rectangle { 
public $topLeft; 
public $bottomRight; 
} 


Теперь создадим экземпляр класса Rectangle и обратимся к свойствам: 


$0) о; 
$obj->topLleft = new Роіпе(); 
$obj->bottomRight = 


= new Rectangl 


new Point (); 


$obj->topLeft->x = 0; 
$obj->topLeft->y = 0; 
$obj->bottomRight->x = 100; 
$obj->bottomRight->y = 50; 


echo $obj->topLeft->x . ' 
echo $obj->bottomRight->x 


//0 0 
$obj->bottomRight->y; // 100 50 


'. $obj->topLeft->y; 


Как видно из примера, для обращения к свойствам класса Point необходимо BHA- 
чале получить доступ к свойствам класса Rectangle, а затем уже с помощью опера- 
тора -> можно изменить и значение свойства класса Роіпе: 


$obj->bottomRight->x = 100; 


Если свойство не существует в классе, и метод _ѕеї () отсутствует, то операция 
присваивания динамически создаст СВОЙСТВО В экземпляре класса: 


class MyClass { } 

$obj = new MyClass (); 
Ѕорј->х = 5; 
Ѕорј->у = 10; 
echo $obj->x; // 5 


echo $obj->y; // 10 


5.12.3. Определение методов внутри класса 


Метод внутри класса создается так же, как и обычная функция, с помощью ключе- 
BOTO слова function: 


[<Область видимости>] function <Имя метода> ([Параметры]) { 
// Тело метода 


} 


В параметре <область видимости> указывается один из модификаторов доступа: 
public, private ИЛИ protected. Смысл их точно такой же, что и у модификаторов 
свойств. Если модификатор доступа не указан, то используется модификатор 
рчар11с. 


В предыдущем разделе мы сделали свойства класса Point общедоступными, нару- 
шив этим один из принципов ООП. Давайте это исправим и объявим свойства 
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с помощью ключевого слова private. Чтобы иметь возможность контролировать 
изменение значений свойств, добавим несколько общедоступных методов (лис- 
тинг 5.65). 


Листинг 5.65. Класс Point 


<?php 
declare (strict_types=1) ; 
namespace main; 


class Point { 
private $x = 0; 
private $y = 0; 
public function setX(int $x) : void { 

$this->x = $x; 


public function setY(int $y) : void { 
$this->y = $y; 


public function getX() : int { 
return $this->x; 


public function getY() : int { 
return $this->y; 


public function _toString() : string { 
return $this->getX() . ' ' . $this->getY(); 


Теперь обратиться к свойствам напрямую через экземпляр класса уже не получится: 
ЗОБ) = new Роіпі (); 

$obj->x = 10; // Ошибка! Свойство объявлено как private 

Чтобы присвоить значение полю $x, необходимо использовать метод весх(). Обра- 
щение к методам осуществляется с помощью оператора ->: 

<Экземпляр класса>-><Имя метода>(); 

Внутри круглых скобок передаются какие-либо значения (если метод не принимает 
параметры, указываются только круглые скобки): 

$05) = new Роіпі (); 


$obj->setX (100); // ок 


Внутри этого метода при необходимости в любой момент времени мы можем доба- 
вить код, проверяющий корректность нового значения. Таким образом соблюдается 
принцип сокрытия данных, называемый инкапсуляцией. 
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ПРИМЕЧАНИЕ 
Если метод с указанным названием не существует в классе, то вызывается магиче- 


ский метод са11() (см. разд. 5.12.17). 
Получить значение свойства $x позволяет метод getX (): 
echo $obj->getX(); // 100 
Общепринято использовать приставку set для Имен методов, изменяющих значе- 
ние свойства, и дес — для имен методов, возвращающих значение свойства. 


Теперь давайте посмотрим на доступ к свойствам и методам внутри класса. Для 
этого используется указатель $this: 
$this-><⁄Mma свойства без знака $> = <Значение>; 


<Значение> = $+һіѕ-><Имя свойства без знака $>; 
5һіѕ-><Имя метода>(); 


Пример: 
public function _toString() : string { 
return $this->getX() . ' ' . $this->getY(); 


} 


Внутри методов класса мы имеем доступ ко всем членам класса, включая закрытые. 
Поэтому инструкцию return можно записать следующим образом: 


return $this->x . ' ' . $this->y; 


Метод с названием  toString() (перед именем два символа подчеркивания) явля- 
ется специальным, его еще называют магическим. Он будет автоматически вызван 
при попытке преобразования объекта в строку — например, при использовании 
оператора echo: 


echo $06); // 100 0 


Если метод отсутствует, то будет выведено следующее сообщение об ошибке: 


Весоуегар1Іе fatal error: Object of class main\Point could not ре 
converted to string 


5.12.4. Конструктор и деструктор 


Чтобы при создании экземпляра класса присвоить начальные значения свойствам, 
необходимо создать метод, имеющий предопределенное название __ construct () 
(перед именем два символа подчеркивания). Такой метод называется конструкто- 
ром. Конструктор всегда автоматически вызывается при создании объекта с по- 
мощью оператора пем. 


public function _ construct (<Параметр>) { 
$this-><⁄Mma свойства без знака $> = <Параметр>; 


} 


При создании экземпляра класса <Параметр> можно указать после имени класса 
в круглых скобках: 


<Экземпляр класса> = new <Имя класса> (<Параметр>); 
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Если конструктор вызывается при создании объекта, то перед уничтожением 
объекта автоматически вызывается метод, называемый деструктором. В языке 
РНР деструктор реализуется в виде метода с предопределенным названием 
_ девегасе(). Внутри этого метода обычно производится освобождение ресурсов, 
например закрытие ранее открытых файлов. 


Пример использования конструктора и деструктора приведен в листинге 5.66. 


Листинг 5.66. Конструктор и деструктор 


<?php 
declare (strict_types=1) ; 
namespace main; 


class Point { 

private $x; 

private $y; 

// Конструктор 

public function _ construct (int $x = 0, int $y = 0) { 
$this->x = $x; 
5Еһіз->у = $y; 
echo "Вызван KOHCTpyKTOp<br>\n"; 


} 
// Деструктор 
public function _destruct() { 


echo "Вызван деструктор<рг>\п"; 
) 
public function _toString() : string { 
rëtúrm біһі5->х . ' O 5ЕҺіз->у . "<рг>\п"; 


Теперь мы можем создать объекты несколькими способами: 


борі = new Роіпе(); 

echo $0967; 

50542 = new Роіпё (100, 50); 
echo $9572; 


Результат в окне УУер-браузера: 


Вызван конструктор 
00 

Вызван конструктор 
100 50 

Вызван деструктор 

Вызван деструктор 
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5.12.5. Наследование 


Наследование — это возможность создания производных классов на основе базово- 
го класса. При этом производный класс автоматически получает возможности базо- 
вого класса и может добавить новую функциональность или переопределить неко- 
торые методы. Базовый класс называют также суперклассом или родительским 
классом, а производный класс — подклассом или дочерним классом. Пример созда- 
ния иерархии классов приведен в листинге 5.67. 


Листинг 5.67. Наследование 


<?php 
declare (ѕігісі іуреѕ=1); 
namespace main; 


class A { // Базовый класс 
public function Ғипс1() echo "A.func1()\n"; } 

} 

class B extends A { // Класс В наследует класс А 
public function func2() echo "В. func2()\n"; } 

} 

class C extends В { // Класс С наследует классы A и B 
public function func3() echo "C.func3()\n"; } 

} 

$obj = new C(); 

$obj- а. // A.func1 () 

$obj->func2 (); // B.func2() 

$obj->func3 (); // C.func3() 


В этом примере вначале класс в наследует все члены класса A. Затем обьявляется 
класс с, который наследует все члены и класса В, и класса д. Каждый класс добав- 
ляет один новый метод. В результате экземпляр класса с имеет доступ ко всем ме- 
тодам классов A и в. Класс д является базовым классом (суперклассом), а класс в — 
производным классом (подклассом). В то же время класс в является базовым для 
класса с. 


При наследовании используется следующий формат определения класса: 


class <Производный класс> extends <Базовый класс> ( 
<Описание членов класса>; 


} 


Необходимо учитывать, что наследуются только общедоступные члены (объяв- 
ленные с помощью ключевого слова public) и защищенные члены (объявленные 
с помощью ключевого слова protected). Закрытые члены класса (объявленные 
с помощью ключевого слова private) не наследуются, и доступа к ним внутри про- 
изводного класса нет. 
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Конструктор и деструктор в базовом классе автоматически не вызываются, если 
они были переопределены в производном классе. Для передачи значений конструк- 
торам базовых классов используется следующий синтаксис: 


рагепе:: сопзегиосе((<Значения>1); 
Для вызова деструктора базового класса выполняется такая инструкция: 
рагепе:: _ destruct (); 


Продемонстрируем передачу значений конструкторам базовых классов на примере 
(листинг 5.68). 


Листинг 5.68. Передача значений конструкторам базовых классов 


<?рһр 
declare (ѕігісі іуреѕ=1); 
namespace main; 


class A { 
private $x; 
public function _ construct ($x) { // Конструктор 
$this->x = $x; 
echo "А. сопѕігисё (); x = {$this->x}<br>\n"; 


} 


class В extends А { 


private $y; 

public function _ construct ($x, $y) { // Конструктор 
parent::__construct ($x); 
$this->y = $y; 
echo "В. сопѕігисї (); у = {$this->y}<br>\n"; 


} 
class С extends В { 
private $z; 


public function __construct ($x, $y, $z) ( // Конструктор 
parent::__construct ($x, $y); 
$this->z = $z; 
echo "C.__construct(); 2 = {$this->z}<br>\n"; 


} 
$obj = new С(1, 2, 3); 


Результат выполнения программы: 


А. __construct(); x 
В. construct (); у = 2 
2 


С. construct (); 
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ПРИМЕЧАНИЕ 
Язык РНР не поддерживает множественное наследование. 


5.12.6. Переопределение методов базового класса 


Чтобы переопределить метод базового класса, достаточно в производном классе 
создать одноименный метод. В этом случае будет вызван метод только из произ- 
водного класса. Чтобы вызвать метод из базового класса внутри производного 
класса, используется следующий синтаксис: 


parent: : <Метод> ( [<Значения>]) 


Рассмотрим переопределение метода на примере (листинг 5.69). 


Листинг 5.69. Переопределение метода базового класса 


<?php 
declare (ѕігісі іуреѕ=1); 


namespace main; 


class A { 
public function func() { echo "А. func ()<br>\n"; } 
} 
class B extends A { 
public function func() { 
echo "В. func ()<br>\n"; 
parent: :func(); // Вызываем метод базового класса 


) 
$06) = new В(); 
$obj->func(); 


Результат в окне УУер-браузера: 


В. Еапс () 
А.Ғаипс() 


ВНИМАНИЕ! 


Конструктор и деструктор в родительском классе автоматически не вызываются. Для 
их вызова также необходимо использовать ключевое слово parent. 


5.12.7. Финальные классы и методы 


В ряде случаев может возникнуть необходимость предотвратить наследование все- 
го класса или запретить переопределение отдельных методов. Для этого использу- 
ется ключевое слово final. Чтобы запретить наследование всего класса, ключевое 
CJIOBO final указывается перед ключевым словом class: 
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final class А ( 
public function Ғипс() { echo "А. Ёопс ()<br>\n"; } 
} 


При запрете переопределения метода ключевое слово final указывается так: 


class А { 
final public function func() { echo "А. Ғипс ()<br>\n"; } 


ПРИМЕЧАНИЕ 
Свойства не могут быть обьявлены финальными. 


5.12.8. Абстрактные классы и методы 


Абстрактные методы содержат только объявление метода-- без реализации. 
Создать экземпляр класса, в котором объявлен абстрактный метод, нельзя. Предпо- 
лагается, что производный класс должен переопределить метод и реализовать его 
функциональность. Абстрактные методы объявляются с помощью ключевого слова 
abstract по следующей схеме: 


abstract [<Модификатор>] function <Имя метода> ( [<Параметры>]); 


Обратите внимание: метод не имеет блока. Сразу после списка параметров за за- 
крывающей круглой скобкой ставится точка с запятой. Если внутри класса сущест- 
вует хотя бы один абстрактный метод, то весь класс следует объявить абстрактным, 
добавив перед ключевым словом class ключевое слово abstract. Следует учиты- 
вать, что абстрактный класс может помимо абстрактных содержать и обычные 
методы. Кроме того, класс может быть объявлен абстрактным, даже если он не 
содержит абстрактных методов. Пример объявления и замещения абстрактного 
метода приведен в листинге 5.70. 


Листинг 5.70. Абстрактные классы и методы 


<?php 
declare (ѕігісі іуреѕ=1); 
namespace main; 


abstract class A { 
abstract protected function func(); // Абстрактный метод 
public function test() { // Обычный метод 
echo "A.test () \п"; 


} 
class B extends A { 
public function func() { // Замешаем метод 
echo "В. func () \п"; 
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$06) = new В(); 
$obj->func(); // В.Ғапс() 
$obj->test(); // А.ғезЕ() 


Обратите внимание: при замешении метода в производном классе ключевое слово 
abstract не указывается. Кроме ТОГО, область видимости замешенного метода 
должна быть такой же или менее строгой. Например, если указан модификатор 
доступа protected, то можно указать ИЛИ protected, ИЛИ public, но не private. Тип 
данных и число параметров у замешаюшего метода должно совпадать с типом 
данных и числом параметров в методе базового класса. 


5.12.9. Объявление констант внутри класса 


Константа внутри класса объявляется с помощью ключевого слова const: 


[<Область видимости>| const <Имя константы без $> = <Значение>; 


Если область видимости не указана, то используется модификатор доступа public. 
Обратите внимание: модификаторы доступа для констант введены в версии 7.1 — 
ранее область видимости не указывалась, и все константы были общедоступными. 


Доступ к константе вне класса осуществляется без создания экземпляра класса, 
т. к. константа существует в единственном экземпляре, а не отдельно для каждого 
объекта: 


<Имя класса>::<Имя константы без $> 


Внутри класса к константе можно обратиться через имя класса или с помощью 
ключевого слова self: 


<Имя класса>::<Имя константы без $> 
зе1Е::<Имя константы без $> 


Пример использования констант приведен в листинге 5.71. 


Листинг 5.71. Пример использования констант 


<?php 
declare (strict_types=1) ; 
namespace main; 


class MyClass { 
public const МҮ CONST = 10; 
private const PI = 3.14; 
public function getPI() { 
return self::PI; 


} 
$obj = new MyClass (); 
echo МуС1азз::МҮ CONST; // 10 
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// echo МуС1азз::РТ; // Ошибка! Константа private 
echo 5ор3->деЕРІ(); ЗАА 


5.12.10. Статические свойства и методы 


Внутри класса можно создать свойство или метод, которые будут доступны без 
создания экземпляра класса. Для этого перед определением свойства или метода 
следует указать ключевое слово static: 


[<Область видимости>| static <Имя свойства> = <Константа>; 

[<Область видимости>] static function <Имя метода> ([Параметры]) { 
// Тело метода 

} 


Статические члены класса существуют в единственном экземпляре, независимо от 
количества созданных объектов. Обратите внимание на то, что внутри статического 
метода невозможно получить доступ к обычным свойствам — только к статиче- 
ским членам класса. Если модификатор доступа не указан, то статические члены 
классы являются общедоступными. 


Доступ к статическим свойствам и методам вне класса осуществляется так: 


<Название класса>::<Имя свойства со знаком 5> 
<Название класса>::<Имя метода> ( [<Параметры>]) 


Способы обращения к статическим членам внутри класса: 


<Название класса>::<Имя свойства со знаком 5> 
<Название класса>::<Имя метода> ( [<Параметры>]) 
зе1Ё::<Имя свойства со знаком $> 
5е1Е: :<Имя метода> ( [<Параметры>]) 


Различные варианты создания статических членов класса и способы доступа к ним 
показаны в листинге 5.72. 


Листинг 5.72. Статические свойства и методы 


<?php 
declare (strict_types=1) ; 
namespace main; 


class MyClass { 
public static $x = 10; 
public static function getX() { 
return self::$x; 


} 

echo MyClass: : $x; // 10 
MyClass::$x = 22; 

echo MyClass::getX(); // 22 


Основы РНР. Создаем динамические И/еЬ-страницы 619 


$c = 'main\MyClass'; // Доступ через переменную 
$с::5х = 33; 
echo $c::getX(); /7 33 

ПРИМЕЧАНИЕ 


Если статический метод с указанным названием не сушествует в классе, то вызывает- 
ся магический метод са115ғағіс() (см. разд. 5.12.17). 


5.12.11. Методы-фабрики 


Как вы уже знаете, при создании экземпляра класса указывается оператор пем, 
после которого следует название класса и круглые скобки, внутри которых переда- 
ются значения конструктору класса. Можно также создать статический метод, ко- 
торый будет использоваться для создания объектов. Название этого метода может 
быть произвольным. Такие методы принято называть методами-фабриками (лис- 
тинг 5.73). 


Листинг 5.73. Методы-фабрики 


<?php 
declare (ѕігісі іуреѕ=1); 
namespace main; 


class MyClass { 

private $x; 

private function _ construct ($x) { 
$this->x = $x; 

} 

// Статический метод-фабрика 

public static function getInstance ($x) { 
return new MyClass ($x); 

} 

public function getX() { 
return $this->x; 


} 

// Так нельзя, у конструктора модификатор private 
// $09631 = new MyClass (10); 

50542 = МуС1азз: :getInstance (10); 

$0673 = МуС1азз: :getInstance (45); 

echo $obj2->getX(); // 10 

echo 5о513->декХ(); // 45 


5.12.12. Полиморфизм 


В результате наследования производный класс получает всю функциональность 
базового класса и может переопределить некоторые методы. После переопределе- 
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ния метода через экземпляр класса будет вызван метод производного класса — 
даже в том случае, если вызов метода производится внутри базового класса (лис- 
тинг 5.74). Такое поведение называется полиморфизмом -- смысл действия, кото- 
рое выполняет одноименный метод, зависит от обьекта, над которым это действие 
выполняется. 


Листинг 5.74. Полиморфизм 


class А { 
public function func() { echo "A.func()\n"; } 
public function test() { $this->func(); } 


} 
class B extends A { 
public function func() { echo "B.func()\n"; } 
} 
Ѕорј = new А(); 


$obj->test(); // A.func() 
$obj = new В(); 
$obj->test (); // B.func() 


5.12.13. Позднее статическое связывание 


Если при наследовании переопределяются статические методы, то ключевое слово 
self будет указывать на метод базового класса, а не на одноименный метод произ- 
водного класса. При использовании статических методов динамическое связывание 
не работает. Чтобы получить результат как при полиморфизме, следует использо- 
вать позднее статическое связывание (листинг 5.75). В этом случае вместо ключе- 
BOTO слова self нужно указать ключевое слово static. 


Листинг 5.75. Позднее статическое связывание 


class А ( 
public static function func() { echo "A.func()\n"; } 
public static function test() { self::func(); } 


// Позднее статическое связывание 
public static function test2() { static::func(); } 
} 
class B extends A { 


public static function func() { echo "B.func()\n"; } 
} 
B::test(); // A.func() 
B::test2(); // B.func() 


5.12.14. Передача обьектов в функцию 


Если функция принимает объект, то класс объекта можно указать в качестве типа 
данных в объявлении параметра. Следует помнить, что при вызове функции и 
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передаче объекта параметр получит копию значения, а значением является иденти- 
фикатор объекта. Свойства этого объекта можно будет изменить внутри функции 
через эту копию идентификатора. 


Если метод объявлен внутри класса с тем же именем, что и класс объекта, то внут- 
ри метода можно будет обратиться ко всем членам класса, включая закрытые. Если 
метод объявлен в другом классе, то к закрытым методам доступа не будет (лис- 
тинг 5.76). 


Листинг 5.76. Передача объектов в функцию 


<?рһр 
declare (strict_types=1) ; 
namespace main; 


class A { 
private $x = 10; 
public $y = 5; 
public static function test(A $obj) { 
echo $obj->x, "Ап"; // ОК, хотя $x - private 


} 
class В { 
public static function беѕї (А $орј) { 
// Нельзя, $x — private и класс не А 
// echo $о6)->х, "Ха"; 


) 

function test(A $067) { 
$obj->y = 11; // Можно изменить объект! 
echo $obj->y, "Аа"; 


$c = new A(); 


test ($c); ЖУАДЫ: 
// Свойство объекта изменилось! 
echo 5с->у, "Аа"; // 11 
А: : сез® ($с); // 10 
B::test ($c); // Ошибка 


Для передачи иерархии классов и использования полиморфизма в качестве типа 
параметра указывается тип базового класса. В этом случае будет вызван одноимен- 
ный метод из производного класса. Помните, что базовый класс должен содержать 
все необходимые методы, т. к. способа приведения объекта одного класса к друго- 
му в РНР нет. Пример указания базового класса в качестве типа параметра приве- 
ден в листинге 5.77. 
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Листинг 5.77. Указание базового класса в качестве типа параметра 


<?php 
declare (ѕігісі іуреѕ=1); 
namespace main; 


abstract class A { 
abstract public function funci (); 
abstract public function func2(); 
} 
class B extends A { 
public function func1() echo "B.func1() "; } 
public function func2() echo "B.func2() "; } 
} 
class C extends A { 
public function func1() echo "C.func1() "; } 
public function func2() echo "C.func2() "; } 
} 
class D { // Класс D не наследует класс А 


public function Ғаипс1() echo "D.func1() "; } 
public function func2() echo "D.func2() "; } 
} 
function test(A $0рј) { // Указан базовый класс 
$obj->func1 (); 
$obj->func2 (); 
} 
$b = new B(); 


$c = new С(); 
// Можем передать в функцию оба объекта, 
// т. к. они наследники класса А 


test (5р); // B.func1() B.func2() 

test ($c); // С.Жапс1() С.Ғапс2() 

$d = рем D(); 

if (5а instanceof А) ( // Не наследник класса А 
test ($d); 


} 


15 cho "Не наследник класса А"; 


Так как в функцию передается значение переменной, то можно сказать, что в функ- 
цию всегда передается копия идентификатора, а значит, внутри функции мы можем 
изменить состояние объекта: 


class MyClass { public $x = 10; } 

function test (MyClass $c) { 
// Внутри функции можно изменить свойства объекта! 
5с->х = 22; 


Основы РНР. Создаем динамические М/ев-страницы 623 


$obj = new MyClass (); 

// Передается копия идентификатора, а не копия объекта! 
test ($067); 

echo $obj->x; // 22 


Следует учитывать, что передача копии идентификатора объекта и передача пара- 
метра по ссылке — это не одно и то же. В первом случае мы можем изменить со- 
стояние объекта через копию идентификатора, но не можем присвоить глобальной 
переменной ссылку на другой объект: 


class MyClass { public $x = 10; } 

function test (MyClass $c) { // Передача копии идентификатора 
$c = new MyClass (); 
5с->х = 22; 
// Значение бор) НЕ изменится! 


} 

ЗОБ) = new MyClass (); 
test ($067); 

echo $obj->x; // 10 


Bo втором случае можно изменить значение глобальной переменной, т. к. ссылка 
ведет на переменную, а не на объект: 


class MyClass { public $x = 10; } 

function test (MyClass &$c) { // Передача параметра по ссылке 
$c = new MyClass (); 
$c->x = 22; 
// Значение $obj изменится! 

} 

$obj = new MyClass (); 

test ($067); 

echo $obj->x; // 22 


Если внутри метода мы создаем анонимную функцию, то внутри тела анонимной 
функции будут видны указатели $this и self: 


class MyClass { 
private $x = 10; 
private static $y = 5; 
(O { 
return function () { return $this->x . ' ' . self::$y; }; 


public function test 


} 

ЗОБ) = new MyClass (); 
$func = $obj->test(); 
echo $func(); // 105 
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5.12.15. Оператор instanceof 


В листинге 5.77 для проверки типа мы воспользовались оператором instanceof. 
Формат оператора: 


<Объект> instanceof <Имя класса или интерфейса> 

Оператор instanceof позволяет проверить: 

С является ли объект экземпляром указанного класса; 

С является ли объект экземпляром класса, наследующего указанный класс; 
С реализует ли класс объекта указанный интерфейс. 


Если условия соблюдаются, то оператор возвращает значение true, в противном 
случае — значение false. 


5.12.16. Приведение типов 


Число, строку или массив можно преобразовать в объект. Достаточно выполнить 
приведение к типу object: 


$х = 10; 
$y = 1.2; 
55 = "Строка"; 


sarr = (1, 2, 3]; 


var dump ( (object) $x); 

// object (stdClass)#1 (1) "scalar"]=> int(10) } 

var dump ( (object) $y); 

// object (stdClass)#2 (1) "scalar"]=> float(1.2) } 

var dump ( (object) $5); 

// object (stdClass) #3 (1) "scalar"]=> string(12) "Строка" } 
var_dump ( (object) агг); 

// object (stdClass)#4 (3) 0]=> int(1) [1]=> int(2) [2]=> int(3) } 


В этом случае возврашается экземпляр класса stdClass. Значение доступно через 
СВОЙСТВО scalar: 


$obj = (object)5; 
echo $obj->scalar; // 5 


B случае со списком названиями свойств станут числа, и получить их значения 
можно только с помощью механизма итераций: 


$05) = (орјесі) [1, 2, 31; 

foreach ($06) аз $value) { 
echo $value . ' '; 

и 2:08 


Попытка преобразования объекта в типы int и float закончится ошибкой. Объект 
можно привести к массиву. В этом случае ключами станут имена свойств. Если 
внутри класса реализован метод с предопределенным названием _ +оѕегіпо (), ТО 
объект можно будет преобразовать в строку (листинг 5.78). 
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Листинг 5.78. Преобразование объекта в строку и массив 


class MyClass ( 
public $x = 10; 
public $y = 1.2; 
public function __toString() { // Преобразование в строку 
rëtúrn б66Һі5-><.!" . 5615$->у; 


} 

$obj = new MyClass (); 

var _ dump ( (string) $067); 

// string(6) "10 1.2" 

var_dump ( (array) $obj); 

// array(2) { ["x"]=> int(10) ["y"]=> float(1.2) } 


5.12.17. Магические методы 


В предыдущих разделах мы познакомились с методами construct () (конструктор 
класса), _destruct() (деструктор класса), сіопе() (клонирование объектов) и 
__toString() (преобразование объекта в строку), которые называются магическими, 
т. к. явным образом мы их не вызываем. Эти методы вызываются автоматически 
в определенных ситуациях — например, при любой попытке использовать объект 
в строковом контексте будет вызываться метод toString (). Помимо рассмотрен- 
ных методов существует и множество других — полный их список смотрите в до- 
кументации. 


Метод іпуоке() вызывается, когда после имени переменной указаны круглые 
скобки. Внутри круглых скобок можно передать методу какие-либо значения (лис- 
тинг 5.79). 


Листинг 5.79. Метод іпуоке() 


class MyClass ( 
public $x = 10; 
public function __invoke ($x) { 
$this->x = $x; 
echo "Вызван метод __invoke () \п"; 


} 

ЗОБ) = new MyClass (); 

$obj (5); // Вызывается _ 1пуоке () 
echo Ѕорј->х; // 5 


Метод _ деридІпғо() вызывается при использовании функций print r() и 
уаг_ ашр (). Внутри метода нужно вернуть ассоциативный массив с именами и зна- 
чениями свойств (листинг 5.80). 


626 Гпава 5 


Листинг 5.80. Метод __debugInfo() 


class MyClass ( 
public $x = 10; 
public function _debugInfo() { 
echo "Вызван метод _ debugInfo ()\n"; 
return ['х' => $this->x]; 


} 

$obj = new MyClass (); 

var_dump ($0bj); // Вызывается _ debugInfo() 
print_r ($0obj); // Вызывается деючидіІпҒо() 


Метод са11() вызывается при отсутствии обычного метода в классе, а статиче- 
ский метод са115еағіс() — при отсутствии статического метода. В первом napa- 
метре методы принимают название вызванного метода, а во втором — список с пе- 
реданными значениями. Пример использования методов __са11() И са115еағіс() 
приведен в листинге 5.81. 


Листинг 5.81. Методы __са11 () И са1154ағіс() 


class MyClass { 

public function са11(5паше, $args) ( 
echo "Вызван метод _ са11()\п"; 
var_dump ($name) ; 
var dump ($args) ; 

} 

public static function _callStatic ($name, $args) { 
echo "Вызван метод _ cCallstatic()\n"; 
var dump ($name) ; 
var dump ($args) ; 


} 

$05) = new MyClass (); 

$obj->test (1); // Вызывается са11() 
MyClass: : func (5); // Вызывается са115еағіс() 


Метод _ зе - () вызывается при попытке присвоить значение отсутствующему свой- 
ству, а метод дек() — при попытке получить значение отсутствующего свойства. 
В первом параметре методы принимают название свойства. Новое значение дос- 
тупно через второй параметр метода _ set(). Пример использования методов 
_ век() И дес() приведен в листинге 5.82. 


Листинг 5.82. Методы _set() и дек() 


class MyClass { 
public function _ set ($name, $value) { 
echo "Вызван метод __set()\n"; 
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var dump ($name) ; 
var dump ($value) ; 

} 

public function дес(5лпапе) { 
echo "Вызван метод де%()Хха"; 
var dump ($name) ; 
return 15; 


} 
$05) = new MyClass (); 


$obj->x = 3; // Вызывается ве%() 
$x = бор3->х; // Вызывается _деї () 
есһо $х; // 15 


Метод _ unset() вызывается при попытке вызова функции опѕеб () для отсутст- 
вующего свойства, а метод 15зек() — при попытке вызова функций іззес() и 
ешреу() для отсутствующего свойства. В качестве параметра методы принимают 
название свойства. Внутри метода і5зек() нужно вернуть логическое значение. 
Пример использования методов  unset() M іззек() приведен в листинге 5.83. 


Листинг 5.83. Методы чипзек() И іззее() 


class MyClass ( 
public function __unset ($name) { 
echo "Вызван метод _ unset () \п"; 
var dump ($name) ; 


} 


public function _ isset ($name) { 
echo "Вызван метод _ isset () \п"; 
var dump ($name) ; 


return true; 


} 
$05) = new MyClass (); 


isset ($05)->х); // Вызывается isset () 

empty ($орј->х); // Вызывается _ isset () 

unset ($орј->х); // Вызывается _ unset () 
ПРИМЕЧАНИЕ 


Описание магических методов sleep() n _wakeup() см. в разд. 5.13.8. 


5.12.18. Сравнение объектов 


Сравнить два объекта можно с помощью операторов == и ===. В первом случае объ- 
екты будут равны, если они содержат одинаковые свойства с одинаковыми значе- 


628 Глава 5 


ниями и являются экземплярами одного и того же класса. Во втором случае срав- 
ниваются идентификаторы объектов — объекты будут равны, если обе переменные 
ссылаются на один и тот же объект. 


Пример сравнения объектов приведен в листинге 5.84. 


Листинг 5.84. Сравнение объектов 


class А { 


public $x 10; 
} 


class B { 
public $x = 10; 


$al = new A(); 
$a2 = new A(); 


$b = new B(); 

мас Әшпр(ба1 == $a2); // bool (true) 
var dump ($a1 === ба2); // bool (false) 
var dump ($al == $b); // bool (false) 


5.12.19. Автоматическая загрузка классов 


Часто классы размешают в отдельных файлах с названием, совпадаюшим с назва- 
нием класса. При этом подключение всех файлов может занять много места. С по- 
мощью Функции spl autoload гедізсес() можно зарегистрировать обработчик, 
в который будет передаваться название класса (с предваряющим названием про- 
странства имен), требующего загрузки. Внутри обработчика нужно выполнить под- 
ключение файла с классом — например, с помощью оператора include. 


Давайте в каталоге C:\xampp\php\includes создадим каталог тат (название нашего 
пространства имен), в который добавим файлы Сіаѕѕ1 тс (листинг 5.85) и Сіав52.іпс 
(листинг 5.86). 


Листинг 5.85. Содержимое файла Сл\хатрр\рһр\іпсіидеѕ\таіт\С!аѕѕ1.іпс 


<?php 

namespace main; 

class Class1 { 
public $x = 10; 


?> 


Листинг 5.86. Содержимое файла C:\xampp\php\includes\main\Class2.inc 


<?php 


namespace main; 
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class С1а$$2 { 


} 
?> 


public $x = 5; 


Теперь выполним автоматическую загрузку этих файлов с классами в основной 
программе (листинг 5.87). 


Листинг 5.87. Автоматическая загрузка классов 


<?php 
namespace main; 


spl_autoload _ register (function ($name) ( 


}); 


@1пс1оае $name . ".іпс"; 


5сі = new С1аз$1 (); 
5с2 = new С1аз$2 (); 
echo $с1->х; // 10 
echo 5с2->х; // 5 


Обратите внимание: параметр $name внутри обработчика будет содержать не только 
название класса, но и название пространства имен, например ма1п\С1азз1. Именно 
ради этого мы и разместили файлы с классами внутри каталога таіп, название кото- 
рого совпадает с названием пространства имен. 


5.12.20. Функции для работы с классами и объектами 


Приведем функции, предназначенные для работы с классами и обьектами: 


o 


get_class ([<0бъект>]) -- возвращает название класса указанного объекта с пред- 
варяющим названием пространства имен. Если параметр не указан, то возвраща- 
ет название класса, внутри которого функция вызвана: 


class MyClass (1) 

бор) = new MyClass (); 

echo get_class ($00ј); // main\MyClass 
echo MyClass::class; // main\MyClass 


get_parent_class ( [<Объект>]) — возвращает название родительского класса для 
указанного объекта с предваряющим названием пространства имен. Если пара- 
метр не указан, и функция вызывается внутри класса, то возвращает название 
родительского класса для текущего класса. Если родительского класса нет, то 
функция возвращает значение false; 


дее дес1агеа с1аѕѕеѕ () — возвращает список всех доступных сценарию классов 
(и пользовательских и встроенных): 


print_r(get_declared classes ()); 
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О сіазз ехізез() — возвращает значение true, если указанный класс объявлен, 
И Ғаізе-- в противном случае. Название класса указывается с предваряющим 
названием пространства имен. Формат функции: 


class_exists (string $name[, bool $autoload=true]) : bool 
Пример: 
var dump (class_exists ('main\\MyClass')); // bool (true) 
8 сІаѕѕ а11а5() -- создает псевдоним для класса: 
с1аз5 а11іаѕ ('main\\MyClass', 'main\\MyClass2'); 
var dump (class_exists ('main\\MyClass2')); // bool (true) 
О get_object_vars (<Объект>) — возвращает массив с названиями и значениями 


доступных свойств для указанного объекта. Вне класса будут видны только 
общедоступные свойства, а внутри класса — все свойства класса: 


$05) = new МуС1аз$(); 
print_r(get_object_vars ($орј)); 


8 дее с1іаѕѕ уагѕ (<Класс>) — возвращает массив с названиями и начальными зна- 
чениями доступных свойств для указанного класса. Вне класса будут ВИДНЫ 
ТОЛЬКО обшедоступные свойства, а внутри класса — все свойства класса: 


ргіпе к(дее с1аз5 уагз ('ша1п\\МуС1а55')); 
П дее с1азз пефроаз (<Класс>) — возвращает список с названиями доступных M€- 


тодов для указанного класса. Вне класса будут ВИДНЫ ТОЛЬКО общедоступные 
методы, а внутри класса — все методы класса: 


ргіпе _r(get_class_methods ('main\\MyClass')); 
m) method exists () -- возвращает значение true, если указанный во втором пара- 


метре метод существует в классе, и false — в противном случае. Формат функ- 
ции: 


method exists (mixed $object, string $method пате) : bool 
Пример: 


бор) = new MyClass (); 
var _ dump (method_exists ($06), 'func')); 
var _dump (method_exists ('main\\MyClass', 'func')); 


П property_exists () — возвращает значение true, если указанное во втором пара- 
метре свойство существует в классе, и Еа15е — в противном случае. Формат 
функции: 


ргорегіу ехіѕіѕ (mixed $class, string $property) : bool 
Пример: 


$05) = new MyClass (); 
var _ dump (property_exists ($06), 'х')); 
var _dump (property_exists ('main\\MyClass', 'х')); 
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5.12.21. Создание шаблона сайта при помощи класса 


При создании больших сайтов страницу обычно делят на три части: верхний КОЛОН- 
титул, тело страницы и НИЖНИЙ колонтитул. Для подключения колонтитулов 
к основному документу используются операторы require И include. 


Нижний колонтитул практически всегда одинаков для всех страниц, а вот верхние 
колонтитулы по определению совпадать не могут, — для всех страниц сайта недо- 
пустим одинаковый заголовок (тег <title>). Более того, каждая страница должна 
иметь уникальное описание для поисковых роботов (тег <meta>). 


Для реализации верхнего колонтитула создадим класс, позволяющий менять заго- 
ловок и описание страницы. Для этого сформируем три файла: 


O НТМІ 5Неадег.іпс — верхний колонтитул (листинг 5.88); 
С footer.inc — нижний колонтитул (листинг 5.89); 


С index.php — основное содержание страницы (листинг 5.90). 


Листинг 5.88. Содержимое файла С:\хатрр\рир\тс!иаез\НТМЕ5Неааег. тс 


<?php 
class HTML5Header { 
private $title; 
private $description; 
private $meta; 
public function _ construct ($title, $description='', $meta='') { 
$this->title = $title; 
$this->description = $description; 
$this->meta = $meta; 
} 
public function show() { 
echo <<<LABEL 
<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<title>{$this->title}</title> 
<meta name="description" content=" {$this->description}"> 
{$this->meta} 
</head> 
<body> 


LABEL; 
} 


?> 
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Листинг 5.89. Содержимое файла C:\xampp\php\includes\footer.inc 


<footer> 
<p>&copy; <?=date('Y')?> г. Все права защищены</р> 
</footer> 
</body> 
</html> 


Листинг 5.90. Содержимое файла index.php 


<?php 
require_once 'НТМІ5Неадег.іпс'; 
$title = 'Заголовок!; 
$description = "Описание"; 
$meta = " <style> body { background: #е8е8е8; } </зіуіе>"; 
$obj = new HTML5Header ($title, 5дезсгірбіоп, $meta); 
$obj->show(); 
?> 
<header> 
<Һ1>Заголовок страницы</һ1> 
</header> 
<section> 


<Һ2>Заголовок содержимого</Һ2> 
<р>Основное содержание страницы</р> 


</зесбіоп> 

<?php 

require_once 'footer.inc'; 
?> 


Если открыть файл index.php в Web-6paysepe и отобразить исходный код, то мы 
увидим следующий НТМГ-код: 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<title>3arojoBok</title> 
<meta name="description" сопёепі="Описание"> 
<style> body { background: #e8e8e8; } </style> 
</head> 
<body> 
<header> 
<Һ1>Заголовок страницы</һ1> 
</header> 
<section> 


<Һ2>Заголовок содержимого</Һ2> 
<р>Основное содержание страницы</р> 
</зесЕ1оп> 
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<footer> 
<p>&copy; 2018 г. Все права защищены</р> 
</footer> 
</body> 
</html> 


Таким образом, меняя значения переменных $title И 54езсгіреіоп, можно сделать 
уникальными заголовок и описание для каждой страницы. 


5.13. Интерфейсы 


Интерфейс похож на абстрактный класс и также содержит только сигнатуру мето- 
дов без реализации. Однако интерфейс не является классом — он лишь требование 
к реализации класса. Класс, реализующий интерфейс, гарантирует, что внутри него 
определены методы, которые описаны внутри блока интерфейса. Если класс не 
переопределяет хотя бы один метод, то он становится абстрактным классом и соз- 
дать экземпляр этого класса будет нельзя. 


Опишем основные различия между интерфейсами и классами: 
П интерфейс не может содержать свойств; 
П интерфейс может содержать константы. Переопределить константу нельзя; 


С все методы, объявленные в интерфейсе, являются абстрактными. Внутри блока 
интерфейса указывается только сигнатура методов без реализации. Эти методы 
обязательно должны быть переопределены в классе, который реализует интер- 
фейс. Внутри интерфейса можно объявить сигнатуру конструктора; 


С все члены интерфейса должны иметь область видимости public; 
С класс может реализовывать сразу несколько интерфейсов; 
O интерфейсы поддерживают множественное наследование. 


Зачем нужны интерфейсы? Во-первых, с помощью интерфейсов можно имитиро- 
вать множественное наследование. Дело в том, что после ключевого слова extends 
в инструкции class допускается указание только одного класса, — следовательно, 
классы не поддерживают множественное наследование. Однако классы могут реа- 
лизовывать сразу несколько интерфейсов. Кроме того, сами интерфейсы поддержи- 
вают множественное наследование. 


Во-вторых, с помощью интерфейсов можно создать аналог функциям обратного 
вызова. В этом случае в функцию передается ссылка на объект, реализующий 
какой-либо интерфейс. Внутри блока интерфейса указывается сигнатура метода, 
который будет вызван при наступлении события. Нам достаточно в своем классе 
реализовать интерфейс и переопределить метод, указанный в интерфейсе. Далее 
создаем экземпляр класса и передаем его в метод регистрации обработчика собы- 
тия. При наступлении события достаточно вызвать метод из интерфейса. 


В-третьих, интерфейсы полезны при командной работе над проектом. Например, 
команда выполняет три задачи. Первый программист реализует ввод данных, вто- 
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рой — их обработку, а третий — вывод обработанных данных. Если эти програм- 
мисты не договорятся заранее, то они не смогут состыковать свои классы. Поэтому 
второй программист говорит первому: «Реализуй интерфейс с методом read()», а 
третьему: «Реализуй интерфейс с методом write (), названия интерфейсов такие-то, 
сигнатура методов такая-то». Все! Теперь каждый программист занимается своей 
работой. Первый программист создает множество классов (например, получение 
данных из строки, получение данных из Интернета и т. д.) и в каждом классе реали- 
зует интерфейс получения данных (метод гега()). Третий программист создает 
множество классов для вывода результата (например, вывод в окно УУер-браузера, 
вывод к файл, передача по сети Интернет, печать на принтере и т. д.) и в каждом 
классе реализует интерфейс вывода (метод чгіге()). Второй программист может 
подключить эти классы к своим классам, указав в качестве типов параметров не 
названия классов, а названия интерфейсов. Поэтому не важно, как называются 
классы, — главное, чтобы они соответствовали требованиям интерфейса. Давайте 
рассмотрим это на примере. 


5.13.1. Создание интерфейса 


Описание интерфейса начинается с ключевого слова interface: 


interface <Имя интерфейса> { 
// Объявление констант и описание сигнатур методов 


} 


Это почти как при создании класса. Только вместо ключевого слова class исполь- 
зуется ключевое слово interface. Но интерфейс не является классом — он всего 
лишь содержит требования, предъявляемые к классу, его реализующему. Требова- 
ния выражаются в сигнатурах методов, которые должен переопределить класс. 
В нашем случае давайте запишем требование реализовать метод геаа() в интерфей- 
се с названием IRead (листинг 5.91). Объявление интерфейса вынесем в отдельный 
файл ІКеай.іпс, и так как будем работать с пространством имен main, создадим этот 
файл в одноименном каталоге (C:\xampp\php\includes\main\IRead.inc). 


Листинг 5.91. Содержимое файла Сл\хатрр\рһр\іпсіидеѕ\таіп\іКеаа.іпс 


<?php 
namespace main; 
interface IRead { 
public function read() : string; 


} 
?> 


Как видно из примера, мы указали только тип возврашаемого значения и название 
метода. После описания метода ставится точка с запятой. Обратите внимание: 
метод не содержит блока с реализацией. Класс должен переопределить этот метод 
и выполнить его реализацию. Какой будет эта реализация, каждый класс решает 
сам, — главное, чтобы метод вернул строку с данными. 
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Теперь аналогично создадим еще один файл с интерфейсом IWrite и методом 
write () (листинг 5.92). 


Листинг 5.92. Содержимое файла Сл\хатрр\рһр\іпсіидеѕ\таіп\Мгіќе.іпс 


<?рһр 
namespace main; 
interface IWrite { 
public function write (string $5) : void; 


?> 


Kak видно из сигнатуры, метод write () принимает строку и ничего не возвращает. 


Итак, у нас есть требования к классам ввода и вывода. Теперь давайте создадим 
классы, реализующие эти интерфейсы. 


5.13.2. Реализация интерфейса 


Чтобы указать, что класс реализует какой-либо интерфейс, после названия класса 
(и выражения наследования, если оно есть) указывается ключевое слово implements 
и название интерфейса: 


class <Имя класса> implements <Имя интерфейса> { 
} 


Реализация интерфейса заключается в переопределении метода из интерфейса 
внутри класса. Реализуем интерфейс твеаа и внутри метода геаа() просто вернем 
какую-либо строку: 


class А implements ТВеаа { 
public function геаа(): string 1 
return "строка 1"; 


} 
Этим мы говорим, что класс A реализует интерфейс твеаа. 


Если класс наследует какой-либо другой класс, то ключевое слово implements ука- 
зывается после названия базового класса: 


class MyClass extends А implements ТВеаа ( 
} 


Класс MyClass наследует класс A и реализует интерфейс IRead. 


Давайте создадим еше один класс, в котором вернем другую строку, а также опре- 
делим какой-либо метод, например конструктор, и закрытое свойство: 


class В implements ТВеаа ( 
private $s = ""; 
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public function _ construct (string $s) ( 
$this->s = $s; 

} 

public function read(): string { 
return $this->s; 


} 


Реализация классов для ввода данных у нас есть. Мы упростили классы, но в реаль- 
ной жизни класс А мог бы получать данные из файла, а класс в — из Интернета. 
Причем, эти классы могли бы иметь множество других методов и свойств, как и 
обычные классы. 


Теперь создадим класс с, реализующий интерфейс Iwrite: 


class С implements IWrite { 
public function write (string $s): void { 
echo $s; 


} 


В этом случае мы также поступаем упрощенно — всего лишь выводим строку 
в окно У/ер-браузера. Нам сейчас главное понять суть интерфейсов, а не разбирать- 
ся с реализацией ввода и вывода. 


Теперь создадим класс р, внутри которого будет производиться обработка данных 
(мы просто изменим регистр символов в строке), полученных из разных источни- 
ков с помощью интерфейса твеаа, и вывод данных согласно интерфейсу Iwrite. 
Чтобы сложилась целостная картина, приведем полное содержание файла index.php 
(листинг 5.93). Интерфейсы у нас расположены в отдельных файлах с названиями, 
соответствующими именам интерфейсов. Эти файлы мы будем подключать авто- 
матически с помощью функции spl autoload register (). 


Листинг 5.93. Реализация интерфейсов. Содержимое файла index.php 


<?php 
declare (ѕігісі іуреѕ=1); 
namespace main; 


spl_autoload _ register (function ($name) { // Автозагрузка 
Qinclude $name . '.іпс'; 


БЕ; 


class А implements ТВеаа { 
public function геаа(): string 1 
return "строка І"; 


} 
class В implements ТВеаа { 
private $s = ""; 


Основы РНР. Создаем динамические И/еЬ-страницы 


public function _ construct (string $s) { 
$this->s = 55; 

} 

public function геаа(): string { 
return $this->s; 


} 
class C implements IWrite { 
public function write (string $s): void { 
echo $s; 


} 

class D { 
private $ir; 
private $iw; 


private $str = ''; 


public function _ construct (ІКеаа $r, IWri 
$this->ir = $r; 
$this->iw = $w; 
$this->str = $this->ir->read(); 


} 


public function сһапде() : void { 
Şthis->str = mb_strtoupper ($this->str, 
"ОТЕ-8'); 
} 
public function мгііе() : void { 


$+Һіѕ->ім->игібе ($this->str); 


} 

$0671 = new Б(пем А(), new С()); 
5ор11->сһалде(); 

$obj1->write (); 

$obj2 = new D 
$obj2->change 
$obj2->write(); 


(new В("строка 2"), new С()); 
() 


, 
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te $w) 1 


// Получаем данные 


// Обрабатываем данные 


// Выводим данные 


// СТРОКА 1 


// СТРОКА 2 


Обратите внимание на типы данных параметров конструктора класса р — там нет 
классов д, ви с. Вместо этих классов указываются названия интерфейсов. Нам не 
важно, как называются классы ввода и вывода, нам важно, чтобы эти классы реали- 
зовывали интерфейсы ввода или вывода. Если типом параметра будет название ин- 
терфейса, то через переменную будут доступны только методы, объявленные внут- 
ри блока интерфейса. А нам ведь больше ничего и не надо — требуется лишь полу- 
чить исходные данные и вывести обработанные. Никакой другой информации 
о реализации классов ввода и вывода нам знать не нужно — и, как можно видеть, 


без этой информации мы прекрасно справились 


с задачей. 
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5.13.3. Реализация нескольких интерфейсов 


Один класс может реализовывать сразу несколько интерфейсов. В этом случае на- 
звания интерфейсов указываются после ключевого слова implements через запятую. 
Создадим класс E, который реализует и интерфейс ввода, и интерфейс вывода (лис- 
тинг 5.94). 


Листинг 5.94. Реализация нескольких интерфейсов 


class Е implements ТВеаа, IWrite { 


public function геаа(): string { 
return "строка 3"; 

} 

public function write (string $s): void { 
echo $s; 


Теперь используем этот класс в нашем процессе ввода, обработки и вывода: 


$objE = new Е(); 

$0573 рем D($objE, бордЕ); 

5ор13->сһалде(); 

$obj3->write (); // СТРОКА 3 


ІН 


В этом случае мы просто передали один объект класса E и для операции ввода, 
и для операции вывода. 


5.13.4. Расширение интерфейсов 


Интерфейсы могут расширяться за счет наследования базовых интерфейсов. При- 
чем интерфейсы поддерживают множественное наследование, в отличие от клас- 
сов. Чтобы наследовать интерфейс, необходимо указать ключевое слово extends H 
название базового интерфейса. Если используется множественное наследование, то 
базовые интерфейсы записываются через запятую. 


Создадим интерфейс IReadWrite, который наследует интерфейсы твеаа и IWrite, и 
добавим его в файл IReadWrite.inc (листинг 5.95). 


Листинг 5.95. Содержимое файла С:\хатрр\рир\тс!идез\тат\Веаа\М/ ие. тс 


<?php 
namespace main; 
interface IReadWrit xtends IRead, IWrite { 


} 
?> 


Теперь создадим класс с, который реализует этот интерфейс (листинг 5.96). 
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Листинг 5.96. Реализация интерфейса IReadwrite 


class С implements IReadWrite ( 
public function read(): string { 
return "строка 4"; 
} 
public function write (string $s): void { 
echo $s; 


Так как новый интерфейс содержит методы и для ввода, и для вывода, мы можем 
его использовать в нашем процессе ввода, обработки и вывода, как обычно: 


$objG = new С(); 

$0674 = new D($objG, $9576); 

5ор14->сһапде() 

$obj4->write(); // СТРОКА 4 


, 


Язык РНР допускает указание нескольких интерфейсов через запятую при реализа- 
ции, а также множественное наследование интерфейсов. Если внутри двух интер- 
фейсов окажутся два одноименных метода, но с разной сигнатурой, то будет вы- 
ведено сообшение об ошибке. Однако если сигнатуры совпадают, то ошибки не 
будет. 


5.13.5. Создание констант внутри интерфейса 


Помимо сигнатур методов, в блоке интерфейса можно создавать общедоступные 
константы. Создадим интерфейс IConst и добавим его в файл ІСопвііпс (лис- 
тинг 5.97). 


Листинг 5.97. Содержимое файла С:\хатрр\рир\тс!идез\тат\Соп$ тс 


<?php 
namespace main; 
interface IConst { 
public const MY CONST = 10; 
public function write(int $n) : void; 
} 
?> 


В этом примере мы добавили в блок интерфейса константу и объявление метода. 
Класс, реализующий этот интерфейс (листинг 5.98), должен переопределить только 
метод ит1ее(). Константа просто наследуется классом и доступна через название 
класса или через название интерфейса: 


echo ІСопвЕ::МҮ CONST; // 10 
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Листинг 5.98. Реализация интерфейса Iconst 


class H implements IConst { 
// Ошибка! Константу переопределить нельзя! 
// public const МҮ СОМ$Т = 44; 
public function мгле (106 $n): void { 
есһо $п . "\п"; 


Обратите внимание: переопределить константу внутри класса, реализуюшего ин- 
терфейс, нельзя. Попытка переопределить константу при наследовании интерфейса 
также приведет к ошибке. 


Создадим экземпляр класса н и выведем значение константы: 


$objH = new Н(); 
$objH->write (Н::МҮ CONST) ; // 10 
$objH->write (IConst::MY_ CONST); // 10 


5.13.6. Интерфейсы и обратный вызов 


Интерфейсы можно использовать также для создания обработчиков различных 
событий. В этом случае в функцию передается ссылка на объект, реализующий 
какой-либо интерфейс. Внутри блока интерфейса указывается сигнатура метода, 
который будет вызван при наступлении события. Нам достаточно в своем классе 
реализовать интерфейс и переопределить метод, указанный в интерфейсе. Далее 
создаем экземпляр класса и передаем его в метод регистрации обработчика собы- 
тия. При наступлении события остается лишь вызвать метод из интерфейса. 


Пример реализации обратного вызова приведен в листинге 5.99. 


Листинг 5.99. Интерфейсы и обратный вызов 


<?php 

declare (strict_types=1) ; 

namespace main; 

// Отключаем буферизацию 

if (ор дес 1еуе1() > 0) ор епа ѓҒ1иѕһ(); 
ор ішріісіс _flush(); 


interface ІС1іск { 

public function onClick() : void; 
} 
class MyHandler implements IClick { 


public function onClick() : void { 
echo str раа ("Нажата kHonka<br>\n", 4096); 
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class MyButton { 

private $ic = null; 

public function setIc(IClick $ic) { // Регистрация обработчика 
$this->ic = $ic; 

} 

public function click() : void { // Нажатие кнопки 
ін 115 пи11 ($this->ic) ) 

$this->ic->onClick(); 


} 
$button = new MyButton (); 
$handler = new МуНапа1ег (); 


$button->setIc ($handler); // Регистрация обработчика 
for (бі = 0; бі < 5; $i++) { 
ѕ1еер (2); // Имитация ожидания 
$button->click(); // Генерируем нажатие 


В этом примере мы создали интерфейс IClick и говорим, что классы, реализующие 
интерфейс, должны содержать метод опс1іск(), который будет вызван при нажатии 
КНОПКИ (имитация обработки событий в оконных приложениях) пользователем. 


Далее создаем класс мунапа1ехг, реализующий интерфейс, и переопределяем метод 
опс1іск(). Внутри этого метода просто выводим сообщение в окно \еБ-браузера 
таким образом, чтобы сообщение не попало в кэш. Внутри класса MyButton (описы- 
вающего кнопку) есть свойство, в котором хранится ссылка на обработчик события 
нажатия кнопки. С помощью метода setIc() производится регистрация обработчи- 
ка, а метод с11ск() — имитирует нажатие кнопки. Далее создаем экземпляр кнопки 
и экземпляр обработчика, а затем регистрируем обработчик и внутри цикла имити- 
pyem нажатие кнопки. Каждый раз в окно \!еБ-браузера будет выводиться сообще- 
ние о факте нажатия кнопки. 


5.13.7. Функции для работы с интерфейсами 


Приведем функции, предназначенные для работы с интерфейсами: 


С interface ехізез() — возвращает значение true, если указанный интерфейс 
объявлен, и Ға1ве-- в противном случае. Название интерфейса указывается 
с предваряющим названием пространства имен. Формат функции: 


interface_exists (string $name[, bool $autoload=true]) : bool 
Пример: 
var dump (interface exists ('main\\IClick')); // bool (true) 
П get _ declared interfaces () возвращает список всех доступных сценарию MH- 


терфейсов (и пользовательских, и встроенных): 


ргіпе г(деЕ десіагед іпбекіасев()); 
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Проверить, реализует ли класс обьекта указанный интерфейс, позволяет оператор 
instanceof: 
$handler = new МуНапа1ег (); 
if ($handler instanceof ІС1Ііск) { 
echo "Класс реализует интерфейс"; 
} 


15 сһо 'Не реализует'; 


5.13.8. Сериализация объектов 
Сериализация объектов выполняется с помощью следующих функций: 
П сегіг1іге() — позволяет преобразовать объект в строку специального формата; 


О unserialize () — используется для восстановления объекта из строки, преобра- 
зованной с помощью функции serialize (). Во втором параметре можно указать 
список с разрешенными названиями классов внутри ассоциативного массива 
С КЛЮЧОМ allowed classes. Если класса нет в списке, то создается объект класса 
_ РНР Incomplete Class. Если во втором параметре указать значение false, 
то класс создаваться не будет, а если true или параметр не указан — то будут 
создаваться объекты любого класса. Формат функции: 


unserialize (string $str[, array $options]) : mixed 


Пример сериализации объектов показан в листинге 5.100. 


Листинг 5.100. Сериализация объектов 


<?php 
declare (strict_types=1) ; 
namespace main; 


class MyClass { 
public $n = 10; 
private $s = ''; 
public function _ construct ($5) { 
$this->s = 55; 
} 
public function _toString() { 
return біһіз-оп . ' ' . 5ЕҺіз->б . "<рг>\п"; 


} 


$00) = new MyClass ('private даға"); 
$str = serialize ($007); 
echo $str . "<br>\n"; 


50512 = unserialize ($56х, ['allowed_classes' => ['main\\MyClass']]); 
echo $0572; // 10 private data 
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Следует учитывать, что при использовании функции опѕегіа1іғе() конструктор 
класса не вызывается. 


Методы _ѕ/еер() и __мгаКеир) 


Как видно из результата выполнения последней инструкции, сериализации подвер- 
гаются не только общедоступные свойства, но и закрытые. Чтобы этого избежать, 
нужно внутри класса создать магический метод 51еер(). Внутри метода нужно 
вернуть список с именами свойств, разрешенных для сериализации. Этот метод 
будет вызываться функцией зегіа1іге(). 


Если внутри класса создать магический метод _ wakeup(), то он будет вызван 
функцией unserialize() после создания объекта. Внутри этого метода можно BOC- 
создать ресурсы объекта — например, выполнить подключение к базе данных. 


Пример использования магических методов sleep() И _ wakeup () приведен в лис- 
тинге 5.101. 


Листинг 5.101. Методы _sleep() И мчакечр() 


<?php 
declare (ѕігісі іуреѕ=1); 
namespace main; 


class MyClass { 
public $n = 10; 
private $s = ''; 
public function _ construct ($5) { 
ЅЕһіѕ->5 = 55; 

} 
public function _sleep() { 
echo "__sleep<br>\n"; 

return ['n']; 
} 
public function _wakeup() { 

echo "__wakeup () <br>\n"; 
} 
public function _toString() { 

return Sthis=>n . ' T a 5ЕҺіз->б . "<рг>\п"; 


} 

$obj = new MyClass ('private data'); 

$str = serialize ($007); 

echo $str . "<br>\n"; 

50512 = unserialize ($56х, ['allowed_classes' => ['main\\MyClass']]); 
echo $0672; // 10 
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Интерфейс Serializable 


Вместо добавления в класс методов в1еер() И маКкепр() можно реализовать MH- 
терфейс Serializable. В этом случае будут вызываться методы из интерфейса, а не 
методы _ з1еер() И _ макеџр(). Однако если сериализация была ранее выполнена 
без использования методов из интерфейса, то будет вызван Метод макечр(). 


Интерфейс Serializable содержит объявление двух методов: 


public function зег1а117е(); 
public function unserialize ($serialized); 


С Метод serialize() вызывается функцией serialize(). Внутри метода нужно 
создать массив, содержащий значения свойств, подлежащих сериализации, и пе- 
редать его функции зех1а112е(). Метод должен вернуть результат выполнения 
сериализации массива. 


С Метод unserialize () вызывается функцией unserialize (). Внутри метода нужно 
преобразовать переданную в качестве параметра строку специального формата 
в массив с помощью функции опѕегіа1іхе (). Затем следует выполнить инициа- 
лизацию свойств класса значениями из этого массива. Иными словами, метод 
unserialize () выполняет роль конструктора. 


Пример реализации интерфейса Serializable приведен в листинге 5.102. 


Листинг 5.102. Пример реализации интерфейса Serializable 


<?php 
declare (ѕігісі іуреѕ=1); 
namespace main; 


class MyClass implements \Serializable { 
public $n = 10; 
private $s = ''; 
public function _ construct ($5) 1 
$this->s = $s; 


public function serialize() { 
return serialize(['n' => $this->n, 's' => $this->s]); 


public function unserialize ($serialized) { 


Ѕагг = unserialize ($5ег1а117еа); 
$this->n = $arr['n'] ?? 10; 
$this->s = $arr['s'] ?? ''; 


} 
public function _toString() { 
return $this->n . ' ' . $this->s . "<br>\n"; 
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$obj = new MyClass ('рглуафе даға"); 

$str = serialize ($007); 

echo $str . "<®г>\п"; 

50512 = unserialize ($56х, ['а11омеа с1аз5ез' => ['таіп\\МусС1аѕѕ']]); 
echo $0572; // 10 private даға 


Обратите внимание: встроенные интерфейсы, так же как и классы, по умолчанию 
не видны внутри пользовательского пространства имен. Поэтому перед именем ин- 
терфейса нужно обязательно указать символ \. 


5.13.9. Итераторы 


Цикл foreach позволяет перебирать не только массивы, но и объекты, реализующие 
интерфейс тгауехзар1е. Этот интерфейс не содержит объявлений методов — он 
всего лишь является базовым для интерфейсов IteratorAggregate И Iterator. 


Интерфейс IteratorAggregate 


Интерфейс ІсегасогАдагедағге содержит объявление метода getIterator (): 


interface IteratorAggregate extends Тгауегѕаріе { 
public function getIterator(); 


} 


Внутри метода getIterator() нужно вернуть идентификатор внешнего итератора. 
В качестве примера вернем объект класса ArrayIterator (листинг 5.103). 


Листинг 5.103. Пример реализации интерфейса IteratorAggregate 


<?php 
declare (strict_types=1) ; 
namespace main; 


class MyClass implements \IteratorAggregate { 
public $x = 10; 
public $y = 5; 
public $z = 22; 
private $s = 'private даға"; 
public function getIterator() { 
return new \ArrayIterator ($this); 


} 
$obj = new MyClass (); 
foreach ($obj as $key => $value) { 


echo "$key $value; "; 
ү //х 10; у 5; х 22; 
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Интерфейс Iterator 


В интерфейсе Iterator объявлены следующие методы: 


interface Iterator extends Traversable { 


public function next (); 
public function valid(); 
public function current (); 
public function rewind (); 
public function key(); 

} 


Предназначение методов: 


O rewind() — устанавливает указатель на первый элемент; 

О next() — перемещает указатель на один элемент вперед; 

O key() — возврашает ключ текушего элемента; 

O соггере() — возвращает значение текущего элемента; 

O та11а() — возвращает значение true, если элемент существует, и false — в про- 


тивном случае. 


Пример реализации интерфейса Iterator приведен в листинге 5.104. 


Листинг 5.104. Пример реализации интерфейса Iterator 


<?php 
declare (strict_types=1) ; 
namespace main; 


class MyClass implements \Iterator { 
private $arr = [10, 5, 8]; 
private $pos = 0; 
public function next() { 
++$this->pos; 


public function valid() { 
return isset ($this->arr[$this->pos]); 


public function current () 1 
return $this->arr[$this->pos]; 


public function rewind() { 
$this->pos = 0; 


public function key() { 


return $this->pos; 
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бор) = new MyClass (); 

foreach ($obj as $key => $value) { 
echo "$key $value; "; 

FAAO 20 Бр 229% 


5.14. Трейты 


Как вы уже знаете, в объявлении класса после ключевого слова extends МОЖНО ука- 
зать только один базовый класс, т. к. язык РНР не поддерживает множественное 
наследование. Однако можно имитировать множественное наследование — с по- 
мощью реализации нескольких интерфейсов, а также с помощью трейтов. 


5.14.1. Создание и импорт трейта 


Трейт описывается так же, как и класс, но вместо ключевого слова с1азз использу- 
ется ключевое слово trait: 


trait <Имя трейта> 1 
// Описание свойств и методов 


} 


Трейт очень похож на класс, но создать экземпляр трейта нельзя. Внутри фигурных 
скобок можно вставить описание обычных свойств и методов, а также описание 
статических членов и абстрактных методов. Обратите внимание: трейт не может 
содержать объявления констант. 


Внутри обычных методов трейта доступен указатель $this. Доступ к статическим 
членам осуществляется с помощью ключевого слова self, а для вызова метода 
базового класса используется ключевое слово parent. 


Выполнить импорт членов трейта в область видимости класса или другого трейта 
позволяет инструкция use. Форматы инструкции: 


use <Имя трейта 1>[, ...[, <Имя трейта N>]]; 
use <Имя трейта 1>[, ...[, <Имя трейта М№]] { 
// Правила разрешения конфликтов 


} 


Пример использования трейтов приведен в листинге 5.105. 


Листинг 5.105. Трейты 


<?php 
declare (ѕігісі іуреѕ=1); 
namespace main; 


trait MyTrait { 
public $x = 10; 
public static $static_property = 22; 
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// public const Му CONST = 3; // Ошибка! 


public function test() { 


echo "MyTrait test(); x = {$this->x}<br>\n"; 


} 


public static function static_func() { 


echo "MyTrait static func (); 


echo self::$static_property 


} 


abstract public function ЕРапс(); 


} 
class MyClass { 
use MyTrait; // 
public function func() 1 // 
echo "func ()<br>\n"; 


} 

$05) = new MyClass (); 

echo $obj->x; // 
echo МуС1аѕѕ::$ѕбаїіс ргорегіу; // 
$obj->test(); // 
Ѕорј->Ғипс(); // 
echo МуС1аѕѕ::збаёіс Ғапс(); // 


static_property = "; 
"<br>\n"; 


Импорт членов трейта 
Переопределение абстрактного метода 


Доступ к свойству 


Доступ к статическому свойству 
Вызов обычного метода 

Вызов обычного метода 

Вызов статического метода 


При использовании статических свойств следует учитывать, что трейт и все классы, 
в которых выполнен импорт членов этого трейта, будут содержать независимые 


экземпляры этих свойств (листинг 5. 


106). 


Листинг 5.106. Использование статических свойств 


<?php 
declare (ѕігісі іуреѕ=1); 
namespace main; 


trait MyTrait { 
public static $x = 2; 


class MyClass { 
use MyTrait; 


class MyClass2 { 


use My1 


} 


echo MyTrait::$x . ' ' . MyClass::$x . ' ' . МуС1а$$2::$х . "<br>\n"; 


//222 
MyTrait::$x = 8; 


есһо МуТгаі::$х . ' ' . МуС1аѕѕ::5х . ' ' . МуС1аѕ52::5х . "<рг>\п"; 
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// 822 

MyClass::$x = 9; 

есһо МуТгаіі::$х . ' ' . MyClass: $x . T T . МуС1авө2::5х . "<рг>\п"; 
8952 

МуС1а552::5х = 1; 

echo MyTrait::$x . ' ' . MyClass::$x . ' ' . МуС1аѕ52::5х . "<br>\n"; 
08:79:41. 


5.14.2. Импорт нескольких трейтов 


В инструкции use можно указать сразу несколько трейтов через запятую. Если 
трейты содержат одноименные методы или свойства, то возникнет конфликт имен, 
и мы получим фатальную ошибку. Однако если значения свойств совпадают, то 
ошибки не будет. 


Чтобы избежать фатальной ошибки, нужно в инструкции use после перечисления 
трейтов внутри фигурных скобок прописать правила разрешения конфликтов: 


С insteadof — позволяет указать, из какого трейта нужно использовать идентифи- 
катор при конфликте имен: 


// Использовать test из МуТгаі вместо test из МуТгаії2 


MyTrait::test insteadof МуТгаії2; 


O аз — позволяет создать псевдоним: 


// Создать псевдоним test2 для test из МуТга1 2 
MyTrait2::test аз test2; 


Пример импорта нескольких трейтов с разрешением конфликта имен приведен 
в листинге 5.107. 


Листинг 5.107. Импорт нескольких трейтов с разрешением конфликта имен 


<?php 
declare (ѕігісі іуреѕ=1); 
namespace main; 


trait MyTrait { 
public $x = 2; 
public function test() { 
echo _ ТВАТТ  . ' test() '; 


} 
trait MyTrait2 { 
public $x = 2; // Ошибки не будет, значения $X одинаковые 
public $y 5s 
public function test() { 
есһо TRAIT  . ' 6е5Е() е; 
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class MyClass ( 
use MyTrait, MyTrait2 { 
// Использовать test из MyTrait вместо MyTrait2 


MyTrait::test insteadof MyTrait2; 


// Создать псевдоним test2 для test из MyTrait2 


MyTrait2::test аз test2; 


} 

бор) = new MyClass (); 

echo $obj->x; // 2 

echo $obj->y; // 5 

$obj->test(); // main\MyTrait test () 
$obj->test2(); // main\MyTrait2 test () 


5.14.3. Изменение модификатора доступа 
при импорте 
Ключевое слово аз В инструкции use позволяет не только создать псевдоним, но и 


изменить модификатор доступа. Пример изменения модификатора доступа приве- 
ден в листинге 5.108. 


Листинг 5.108. Изменение модификатора доступа при импорте 


<?php 
declare (ѕігісі іуреѕ=1); 
namespace main; 


trait MyTrait { 
protected function test() { 
echo TRAIT: . ' тезЕ() T3 
} 
protected function func() { 
echo _TRAIT__ . ' func() '; 


} 
class MyClass { 
use MyTrait { 
MyTrait::test as public; 


MyTrait::func as public test2; 


$05) = new MyClass (); 
$obj->test(); // main\MyTrait test () 
$obj->test2(); // main\MyTrait func () 
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5.14.4. Приоритет при наследовании 


При наследовании используются следующие правила разрешения конфликтов: 


С если внутри трейта и базового класса существуют одноименные методы, имею- 
щие одинаковую сигнатуру, то метод из трейта переопределит метод базового 
класса. Чтобы вызвать переопределенный метод базового класса, следует ис- 
пользовать ключевое слово parent (например, parent: :test ()); 


С если внутри трейта и текущего класса существуют одноименные методы, 
имеющие одинаковую сигнатуру, то метод из текущего класса переопределит 
метод из трейта. Чтобы вызвать переопределенный метод из трейта, следует 
создать псевдоним в инструкции use (например, MyTrait::func аз Ғапс2); 


П если одноименные методы имеют разную сигнатуру, то это приведет к фаталь- 
ной ошибке. 


Пример учета приоритета при наследовании приведен в листинге 5.109. 


Листинг 5.109. Приоритет при наследовании 


<?php 
declare (ѕігісі іуреѕ=1); 
namespace main; 


trait MyTrait { 
public function test() { 


есһо -TRATI at test) е; 
// Так можно вызвать одноименный метод из базового класса 
// parent::test(); 


} 


public function func() { 
echo TRAIT _ . ' func() '; 


} 
class MyBaseClass { 
public function test() { 
есһбо CLASS . ' ёезі() '; 


class MyClass extends MyBaseClass { 
// реопределяет test() из МуВаѕеС1аѕѕ 
use MyTrait { 


// Создание псевдонима для переопределенного метода 
yTrait::func аз func2; 
| 
// Переопределяет Ғипс() из МуТгаів 
public function func() { 

echo _CLASS__. ' func() '; 
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$05) = new МуС1аз$(); 

$obj->test(); // main\MyTrait test () 
$obj->func(); // main\MyClass func () 
$obj->func2(); // main\MyTrait func () 


5.14.5. Импорт трейта внутри другого трейта 


Инструкцию use допускается указывать не только внутри класса, но и внутри блока 
другого трейта. Рассмотрим это на примере (листинг 5.110). 


Листинг 5.110. Импорт трейта внутри другого трейта 


<?php 
declare (ѕігісі іуреѕ=1); 
namespace main; 


trait MyTrait1 { 
public function test() { 
echo _ ТВАТТ  . ' test() '; 


} 
trait MyTrait2 { 
public function func() { 
есһо _ ТВАТТ 2 ' Епс() "; 


} 
trait MyTrait3 { 

use MyTrait1l, MyTrait2; 
} 
class MyClass { 


use MyTrait3; 
} 
$obj = new MyClass (); 
$obj->test(); // main\MyTrait1 test () 
$obj->func(); // main\MyTrait2 func () 


5.14.6. Функции для работы с трейтами 


Приведем функции, предназначенные для работы с трейтами: 


С trait ехізіз() -- возвращает значение true, если указанный трейт объявлен, 
И Еа1зе — в противном случае. Название трейта указывается с предваряющим 
названием пространства имен. Формат функции: 


trait_exists (string $name[, bool $autoload=true]) : bool 
Пример: 


var dump (trait_exists ("таіп\\МуТгаіё1')); // bool (true) 
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п get_declared_traits () — возвращает список всех доступных сценарию трейтов: 


ргіпё г(деЕ аес1акеа traits ()); 


5.15. Обработка ошибок 


Существуют три типа ошибок в скриптах: синтаксические, логические и ошибки 
времени выполнения. Если ошибку не устранить или не обработать ее внутри 
скрипта, то интерпретатор либо выведет сообщение о фатальной ошибке и досроч- 
но прервет выполнение программы, либо выведет предупреждающее сообщение, 
но при этом неправильный результат предыдущей инструкции может привести 
к следующей ошибке. 


5.15.1. Синтаксические ошибки 


Синтаксические ошибки — это ошибки в имени оператора или функции, отсутст- 
вие закрывающей или открывающей скобок ит. д., т. е. ошибки в синтаксисе языка. 
Как правило, интерпретатор предупредит о наличии ошибки, а программа не будет 
выполняться совсем. 


Например, если вместо: 

есһо "строка"; 

написать 

есдо "строка"; 

то МеБ-браузер отобразит нечто подобное: 


Parse error: syntax error, unexpected ''строка'' 
(T_CONSTANT_ENCAPSED_STRING) іп C:\xampp\htdocs\index.php on line 22 


Здесь интерпретатор предупреждает нас, что в строке 22 файла index.php содержит- 
ся ошибка. Достаточно отсчитать 22 етроки в исходном коде и исправить опечатку 
С есдо На echo. 


Приведем часто встречающиеся синтаксические ошибки: 

С отсутствует точка с запятой в конце инструкции; 

С опечатка в имени оператора или функции; 

С буква набрана в русской раскладке клавиатуры вместо латинской; 
п 


отсутствие открывающей или закрывающей скобки (или, наоборот, лишние 
скобки); 


С в цикле for указаны параметры через запятую, а не через точку с запятой. 


5.15.2. Логические ошибки 


Логические ошибки — это ошибки в логике работы программы, которые можно вы- 
явить только по результатам ее выполнения. Как правило, интерпретатор не преду- 
преждает о наличии логической ошибки, а программа будет выполняться, т. к. 
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не содержит синтаксических ошибок. Такие ошибки весьма трудно выявить, и их 
поиск часто заканчивается бессонными ночами. 


Например, в логическом выражении вместо оператора == (равно) указан оператор 
присваивания =, или там, где нужно использовать оператор идентичности, исполь- 
зуется оператор равенства. С точки зрения синтаксиса здесь все правильно, а вот 
с логикой могут быть проблемы: 


var_dump (10 == '10 век"); // bool (true) 


В этом примере строка преобразуется в число и сравниваться будут числа, а не 
строки. Результатом будет истина, хотя здравый смысл подсказывает обратное. 


5.15.3. Ошибки времени выполнения 


Ошибки времени выполнения возникают во время работы скрипта. Их причиной 
являются события, не предусмотренные программистом. В одних случаях ошибки 
времени выполнения являются следствием логических ошибок, а в других причи- 
ной могут стать внешние события, например: отсутствие прав для записи в файл, 
файл не найден (пользователь взял и удалил файл, посчитав, что он не нужен) и др. 
В этом случае интерпретатор генерирует либо предупреждающее сообщение, либо 
исключение. Если в коде не предусмотрена обработка исключения, то программа 
прерывается, и выводится сообщение об ошибке. 


5.15.4. Оператор @ 


С помощью оператора @ можно подавить вывод предупреждающих сообщений 
в выражении, которому он предшествует. Например, подавить вывод сообщения об 
ошибке деления на ноль: 


$value = @(2 / 0); 


или 
@$value = 2 / 0; 

var dump ($value); // float (INF) 

Однако после этого значение $value не будет иметь смысла (в данном случае $value 
получит значение INF), т. е. сама ошибка устранена не будет. 


Обратите внимание: с помощью оператора @ можно подавить вывод сообщений 
только для ошибок уровней Notice (например, использование не определенной пе- 
ременной) и Warning (например, деление на ноль). Подавить ошибки более высоко- 
го уровня оператор @ не позволяет. 


5.15.5. Управление отображением сообщений 
об ошибках 


Задать степень обработки и протоколирования ошибок позволяет директива 
error_reporting в файле php.ini: 


error герокбіпд-Е ALL 
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Приведем константы, указываемые в этой директиве: 


var dump (Е АШ); // int(32767) (все ошибки) 

var dump (Е ERROR) ; // int(1) (фатальные ошибки) 

var dump (Е WARNING) ; // int(2) (предупреждения) 

var dump (Е PARSE); // int(4) (синтаксические ошибки) 
var dump (Е NOTICE); // int(8) (уведомления) 

var dump (Е DEPRECATED) ; // int(8192) (устаревшие инструкции) 
мас dump (E_STRICT) ; // int(2048) 

var dump (Е СОКЕ ERROR) ; // int(16) 

var dump (Е СОКЕ WARNING) ; // int(32) 

var dump (Е _ COMPILE ERROR) ; // int(64) 

var dump (Е COMPILE WARNING); // int(128) 

var dump (E_RECOVERABLE ERROR); // int(4096) 

// Ошибки, генерируемые в скрипте 

var dump (Е_ОЗЕВ_ЕВВОВ) ; // 10 (256) 

var dump (Е ОЅЕЋ WARNING) ; // іпе(512) 

var dump (Е USER NOTICE); // int(1024) 

var dump (Е USER_DEPRECATED); // int(16384) 

Чаще всего указывается комбинация этих констант через побитовые операторы: 
error герогііпд=Е АШ. & ~E NOTICE 


Знак - (тильда), стояший перед значением, указывает, что вывод сообшений об 
ошибке этого типа должен быть выключен. Иными словами, прочитать указанное 
значение можно так: включить вывод всех сообшений об ошибках, кроме уведом- 
лений. 


Если доступа к файлу php.ini нет (на виртуальном хостинге доступа точно не будет), 
то в сценарии можно вызвать функцию error reporting (): 


error герокбіпа(Е АШ. 8 ~E NOTICE 6 “Е WARNING) ; 


В качестве параметра функции error_reporting () можно указать число: 


error_reporting (32757); 
var dump (Е АШ. & ~E NOTICE & ~E WARNING); // 106 (32757) 


Чтобы отключить ВЫВОД сообшений, достаточно указать значение 0: 


error reporting (0); 


Включить вывод всех сообщений об ошибках можно с помощью константы Е ALL 
или значения -1: 


error_reporting (-1); 


Если параметр не задан, то функция вернет текушее значение: 


echo error reporting(); // 32767 
var dump (E_ALL); // int (32767) 


Изменить значение директивы error reporting из скрипта можно также с помощью 
функции ілі зек(): 
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ini_set('error reporting', Е ALL 6 ~E NOTICE); 
echo error reporting (); // 32759 
var dump (E ALL & -Е КОТІСЕ); // 106 (32759) 


Для изменения значения директивы error reporting из файла .htaccess используется 
следующий синтаксис: 


php value error reporting 32759 


На виртуальном хостинге принято не выводить ошибки в Web-6paysep, а записы- 
вать их в журнал ошибок error.log. В этом случае при возникновении фатальной 
ошибки пользователь увидит белый экран, а не сообщение об ошибке, в составе 
которой может содержаться конфиденциальная информация. 


Отключить ВЫВОД ошибок в \еБ-браузер позволяет директива di splay_errors 
в файле php.ini: 

аівріау егкогз=ОЕЕ 

Директива log_errors включает вывод сообщений об ошибках в журнал ошибок: 


104 еккокз-Оп 


Задать путь к файлу, в который будут выводиться ошибки, позволяет директива 


error log: 
error Іод="С: /хатрр/рһр/10одѕ/рһр error_log" 


Изменить эти директивы из скрипта можно с помощью функции 101 ѕеї (): 


іпі ѕеї ('"еггог герогііпд', Е АШ); 


( 
іпі зе ('915р1ау еггогѕ', 'Off'); 
101 век("еккок 104", "рһр еккок 109'); 
ini_set('log_errors', "Оп"); 


Для изменения значения директив из файла .htaccess используется следующий CHH- 
таксис: 


php value error reporting 32767 
php value display_errors "0" 

php flag log_errors On 

php value error_log "php error log" 


Обратите внимание: мы не указали путь в последней инструкции, поэтому файл 
будет создаваться в том же каталоге, что и файл со скриптом. Если нужно все 
сообшения записывать в один файл, то следует указать путь. 


В предыдущих версиях РНР директива display errors имела логическое значение, 
а не строку, как в PHP 7, поэтому использовалась следующая инструкция для 
отключения вывода сообщений об ошибках в УУер-браузер: 


php flag display_errors Off 
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5.15.6. Инструкция ог die() 


Для обработки критических для всей программы ошибок можно использовать ин- 
струкцию ох а1е(). В круглых скобках может быть указано сообщение об ошибке 
или функция, которая будет вызвана при возникновении ошибки. После вывода 
сообщения или вызова функции выполнение скрипта прекратится: 


@$file = Ғореп ("Е11е.6хе", "г") or die ("Ошибка"); 


ИЛИ 


@$Е11е = Ғореп ("Е11е.6хе", "ү") ог die(err msg()); 


function err msg() { 
echo "Ошибка"; 


5.15.7. Обработка и генерация 
пользовательских ошибок 


Функция set error һапФІег() позволяет назначить пользовательский обработчик 
ошибок. Формат функции: 


set_error handler (callable $егког handler[, int $еггог types]) : mixed 


B первом параметре указывается функция обратного вызова, которая будет исполь- 
зоваться для обработки ошибок. Формат функции: 


function (Ѕеггпо, $errstr, $errfile, $errline) 


Через параметр $errno доступен уровень ошибки, через $errstr — описание ошиб- 
ки в виде строки, через $errfile — название файла, а через $errline — номер стро- 
ки с ошибкой. Функция должна возвращать значение true, если обработка успешно 
выполнена, и false — в противном случае. В первом случае управление будет ne- 
редано следующей инструкции после инструкции, вызвавшей ошибку, а во вто- 
ром — стандартному обработчику ошибок. 


Обратите внимание: во-первых, не все типы ошибок можно обработать, во-вторых, 
если продолжение работы лишено смысла, то внутри обработчика нужно вызвать 
оператор exit () или передать управление стандартному обработчику ошибок, Bep- 
HYB значение false. 


Функция trigger error() позволяет сгенерировать пользовательскую ошибку 
внутри программы. Формат функции: 

trigger error (string $error msg[, int $error_type]) : bool 

В первом параметре указывается текст описания ошибки длиной до 1024 байтов. 


Во втором параметре можно указать тип ошибки. По умолчанию используется тип 
Е USER NOTICE. 


Обработаем ошибки E NOTICE И E USER NOTICE, а остальные ошибки передадим 
стандартному обработчику ошибок (листинг 5.111). 


658 Гпава 5 


Листинг 5.111. Обработка и генерация ошибок 


<?php 
set_error handler (function ($errno, $errstr, $errfile, Ş$errline) { 


switch ($errno) { 
case E NOTICE: 
echo "Ошибка Е NOTICE; текст: $errstr; файл: $errfile; "; 


echo "строка: $errline<br>\n"; 

// Стандартный обработчик вызван не будет 
return true; 
case Е ОЗЕВ NOTICE: 
echo "Ошибка E USER NOTICE; текст: $errstr<br>\n"; 

// Стандартный обработчик вызван не будет 


ЕТ 


return true; 
} 
// B других случаях передаем управление стандартному обработчику 
return false; 


DE 


echo $x; // Ошибка Е NOTICE (обрабатываем) 
$x = 10 / 0; // Ошибка Е WARNING (не обрабатываем) 
// Ошибка Е ОЅЕК МОТТСЕ (обрабатываем) 


trigger еггог ("Описание ошибки", Е ОЗЕВ МОТІСЕ); 


Результат в окне УУер-браузера: 


Ошибка Е NOTICE; текст: Undefined variable: х; файл: 
С: \хатрр\һћёаосѕ\іпіех.рһр; строка: 17 


Warning: Division Бу zero іп C:\xampp\htdocs\index.php оп line 18 


Ошибка E USER _ NOTICE; текст: Описание ошибки 


5.15.8. Инструкция try...catch...finally 


Помимо обработки ошибок, язык РНР содержит возможность обработки и генера- 
ции исключений. Исключения -- это извешения, возбуждаемые в случае возникно- 
вения ошибки в программном коде или при наступлении какого-либо события. 
Если в коде не предусмотрена обработка исключения, то выполнение программы 
прерывается, и выводится сообщение об ошибке. 


Для обработки исключений предназначена инструкция try...catch. Формат инст- 
рукции: 
try { 


<Блок, в котором перехватывается исключение» 


} 
[catch (<Класс исключения1> <Переменная>) { 


<Блок, выполняемый при возникновении исключения> 
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Река 
catch (<Класс исключенияМ> <Переменная>) 1 
<Блок, выполняемый при возникновении исключения> 
1 
[finally 1 
<Блок, выполняемый в любом случае> 


}] 


Инструкции, в которых перехватываются исключения, должны быть расположены 
внутри блока try. Если при выполнении этих инструкций возникнет исключение, 
то управление будет передано в блок catch, который соответствует классу исклю- 
чения. Классом исключения может выступать встроенный класс или пользователь- 
ский класс. Обратите внимание: если исключение не возникло, то инструкции 
внутри блока catch не выполняются. 


Начиная с РНР 7.1, вместо нескольких блоков catch можно использовать один блок 
catch с несколькими исключениями, указанными через символ |. В этом случае 
управление будет передано в блок catch при генерации любого из этих исклю- 
чений: 


try { 
ЕЕ 

} catch (\Еггог | \Ехсерііоп $e) { 
есһо "Еггог или Ехсерііоп"; 


} 


В качестве примера использования инструкции try...catch инсценируем создание 
объекта не существующего класса и обработаем исключение: 


<?php 
declare (ѕігісі іуреѕ=1); 
namespace main; 
try { 
$obj = new MyClass (); 
echo "Инструкция выполнена не будет!"; 


} catch (ХЕкток бе) 1 


echo "Error: не удалось создать объект<рг>\п"; 


} 
echo "Инструкция после try'; 


Результат в окне УУер-браузера: 


Еггог: не удалось создать объект 


нструкция после try 


При возникновении исключения внутри блока try управление сразу передается 
в блок catch, соответствующий классу возникшего исключения. В нашем примере 
классом исключения является встроенный класс Error. Код, расположенный после 
инструкции, сгенерировавшей исключение, выполнен не будет, поэтому вывод со- 
общения мы не увидим, — после выполнения инструкций в блоке catch управление 
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передается инструкции, расположенной сразу после инструкции try. ..catch. Ины- 
ми словами, считается, что исключение обработано, и можно продолжить выпол- 
нение программы. 


В некоторых случаях — например, если не имеет смысла продолжать работу, — 
необходимо не продолжить выполнение программы, а прервать ее выполнение по- 
сле перехвата исключения. В этом случае можно внутри блока catch произвести 
завершающие действия (например, проинформировать пользователя о проблеме), 
а затем прервать работу программы с помощью оператора exit (): 


<?php 
declare (ѕігісі іуреѕ=1); 
namespace main; 
try { 
$obj = new MyClass (); 
echo "Инструкция выполнена не будет!"; 


} catch (ХЕкток бе) { 


ехії ("Еггог: не удалось создать объект"); 


) 


echo "Инструкция после try'; 


Результат в окне УУер-браузера: 


Еггог: не удалось создать объект 


Если нет блока catch, соответствующего классу исключения, то исключение 
«всплывает» к обработчику более высокого уровня. Если исключение в программе 
нигде не обрабатывается, то управление передается обработчику по умолчанию, 
который останавливает выполнение программы и выводит стандартную информа- 
цию об ошибке. Таким образом, в обработчике может быть несколько блоков catch 
с разными классами исключений. Кроме того, один обработчик можно вложить 
в другой (листинг 5.112). 


Листинг 5.112. Обработка исключений 


<?php 
declare (ѕігісі іуреѕ=1); 
namespace main; 


class MyException extends \Exception {} 
try { 
try { 
$06) = new MyClass (); 


// throw new МуЕхсерііоп (); 
} catch (MyException $ex) { 
echo "MyException<br>\n"; 
} catch (\Exception $ex) { 
echo "E 


xception: {$ex->getMessage ()}<br>\n"; 
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echo "Инструкция после вложенного обработчика'; 


} catch (ХЕккок бе) { // Выполняется этот блок! 


echo "Error: не удалось создать объект<рг>\п"; 


} 


echo "Инструкция после try'; 


В этом примере во вложенном обработчике не указано исключение Error, поэтому 
исключение «всплывает» к обработчику более высокого уровня. После обработки 
исключения управление передается инструкции, расположенной сразу после об- 
работчика. В нашем примере управление будет передано инструкции, выводящей 
сообщение Инструкция после try. Обратите внимание на то, что инструкция: 


echo "Инструкция после вложенного обработчика"; 


выполнена не будет. 


При указании нескольких блоков catch с разными классами исключений следует 
учитывать иерархию классов исключений. Если в одной инструкции <гу...сағсһ 
находятся блоки catch с базовым и производным классами, то вначале должен идти 
блок с производным классом, а затем блок с базовым, иначе блок с производным 
классом никогда не будет выполнен. В нашем случае вначале идет блок с классом 
MyException, а лишь затем блок с классом Exception. 


Если в блоке catch указан самый верхний класс в иерархии классов исключений, то 
он будет перехватывать исключения любых производных классов. Если в блоке 
catch указан интерфейс Throwable, который реализуют и класс Exception, и класс 
Еггог, ТО можно перехватить все исключения (листинг 5.113). 


Листинг 5.113. Перехват всех исключений 


<?php 
declare (strict_types=1) ; 
namespace main; 
CEV { 
$06] = new MyClass (); 
} catch (\Throwable $e) { 
echo "Обработка любых исключений B коде<рг>\п"; 
} 


echo "Инструкция после try'; 


Обратите внимание: можно перехватить все исключения, но не все ошибки. Между 
этими двумя понятиями в РНР есть разница. Большинство встроенных функций 
генерируют именно ошибки и предупреждения, а не исключения. Поэтому пере- 
хватить ошибку деления на ноль с помощью инструкции try.. .catch нельзя. 


Получить информацию об обрабатываемом исключении можно через переменную, 
объявленную в блоке catch (листинг 5.114). 
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Листинг 5.114. Получение информации об исключении 


<?php 
declare (ѕігісі іуреѕ=1); 
namespace main; 
try { 
$obj = new MyClass (); 
} catch (\Error $e) { 
echo "Error: не удалось создать объект<рг>\п"; 


cho $e->getMessage() . "<br>\n"; 
cho $e->getFile() . "<br>\n"; 
cho $e->getLine() . "<br>\n"; 


print_r($e); 


Результат в окне УУер-браузера: 


Error: не удалось создать обьект 

Class 'main\MyClass' not found 

С: \xampp\htdocs\index. php 

5 

Error Object ( [message:protected] => Class 'main\MyClass' not found 
[string:Error:private] => [code:protected] => 0 [file:protected] => 
C:\xampp\htdocs\index.php [line:protected] => 5 


[trace:Error:private] => Array ( ) [previous:Error:private] => ) 


Помимо блоков catch инструкция try. ..catch может содержать блок finally, инст- 
рукции внутри которого выполняются вне зависимости от того, возникло в блоке 
try исключение или нет. Обычно внутри этого блока выполняется освобождение 
каких-либо ресурсов, например закрытие файлов. Если внутри блока catch вызвать 
оператор exit (), то инструкции внутри блока finally выполнены не будут. Пример 
использования блока Ғіпа11у приведен в листинге 5.115. 


Листинг 5.115. Блок finally 


<?php 
declare (strict_types=1) ; 
namespace main; 
try 1 
$obj = new MyClass (); 
} catch (\Error $e) { 
echo "Error: не удалось создать объект<рг>\п"; 
} finally { 
echo "Блок finally<br>\n"; 


Результат в окне УУер-браузера: 


Error: не удалось создать объект 
Блок finally 
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Если существует блок finally, то блоков catch может не быть вовсе: 


<?php 
declare (ѕігісі іуреѕ=1); 
namespace main; 
Егу { 

$05] = new MyClass (); 
} finally { 

echo "Блок finally<br>\n"; 
} 


Результат в окне УУер-браузера: 


Блок finally 


Fatal error: Uncaught Error: Class 'main\MyClass' not found in 
С: \xampp\htdocs\index.php:5 Stack trace: #0 {main} thrown in 
C:\xampp\htdocs\index.php on line 5 


5.15.9. Оператор throw. Генерация исключений 


Вместо обработки исключения можно повторно сгенерировать исключение внутри 
блока catch, чтобы передать управление вышестоящему обработчику. Например, 
можно сгенерировать исключение более высокого уровня. Кроме того, если мы 
разрабатываем какой-либо метод и внутри него не имеем возможности вернуть 
корректное значение при некорректном значении параметров, то лучше сгенериро- 
вать исключение, чтобы другие пользователи знали о проблеме. Например, метод 
возвращает целое число. Какое значение мы могли бы вернуть при ошибке? -17 Но, 
это также число. Генерация исключения в этом случае — лучшее решение. 


Для генерации исключения в программе предназначен оператор throw. После one- 
ратора указывается объект класса исключения. Это может быть встроенный класс 
исключений или пользовательский класс, наследующий один из классов встроен- 
ных исключений. Давайте создадим два обработчика, один из которых вложен 
в другой. Внутри блока try вложенного обработчика имитируем создание объекта 
не существующего класса. Внутри блока catch вложенного обработчика перехва- 
тим это исключение и сгенерируем исключение другого класса. Повторное исклю- 
чение перехватим в блоке catch внешнего обработчика (листинг 5.116). 


Листинг 5.116. Оператор throw 


<?php 
declare (ѕігісі іуреѕ=1); 
namespace main; 
Егу { 
Егу { 
$06) = new МуС1азѕ(); 


} catch (ХЕгкок $e) 1 
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throw new \Exception ("Не удалось создать обьект"); 
} 
echo "Инструкция после вложенного обработчика'; 
} catch (\Exception $ex) { 
echo "Exception: {$ex->getMessage () }<br>\n"; 


Результат в окне УУер-браузера: 


Exception: Не удалось создать объект 


Обратите внимание на инструкцию: 


throw new ХЕхсербіоп("Не удалось создать объект'); 


Здесь мы создаем экземпляр класса Exception и передаем конструктору класса 
строку с описанием ошибки. Эту строку мы можем получить внутри блока catch 
внешнего обработчика через переменную $ex с помощью метода де<Меззаде(). 


5.15.10. Иерархия классов исключений 


Базовыми классами всех исключений являются классы Error И Exception. Класс 
Error описывает внутренние ошибки РНР, а класс Exception — ошибки внутри про- 
граммы. Если мы в блоке catch указываем имя базового класса, то блок будет nepe- 
хватывать исключения всех производных классов. 


Формат конструкторов классов Error И Exception: 


public _ сопзегасе ( [$щеззаде=""[, $сойе=0[, $previous=null]]]) 


В параметре $message можно указать текст сообщения, который будет доступен 
через метод getMessage (). Параметр $code позволяет указать код исключения, KOTO- 
рый будет доступен через метод декСоде(). Параметр ӛргеуіоав используется для 
создания цепочки исключений. 


Вот пример генерации и обработки исключения класса Exception: 


try { 

throw new \Ехсерііоп ('Сообщение об ошибке’); 
} catch (\Exception $ex) { 

echo "Exception: {$ex->getMessage ()}<br>\n"; 


} 


Все базовые классы исключений реализуют интерфейс Throwable. Если в блоке 
catch указать название этого интерфейса, то можно перехватить все исключения. 


Интерфейс Throwable содержит следующие методы: 


С __toString() — возвращает информацию об исключении в виде строки: 


$ex = new \Exception ('Сообщение'); 
echo $ex; 


// Exception: Сообщение іп C:\xampp\htdocs\index.php:4 
// Stack trace: #0 {main} 
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п деЧМеззаде() -- возвращает описание ошибки: 


$ex = new \Ехсерііоп ("Сообщение об ошибке'); 
cho $ex->getMessage(); // Сообщение об ошибке 


П декСоде() — возвращает код исключения: 


$ex = new \Ехсерііоп ("Сообщение об ошибке', 2); 
cho Ѕех->деіСойе(); // 2 


О сесгі1е() — возвращает название файла: 


$ex = new \Ехсерііоп ("Сообщение об ошибке"); 
cho бех->деЕҒі1е(); // C:\xampp\htdocs\index.php 


О getLine() — возвращает номер строки: 


$ex = new \Exception ('Сообщение об ошибке"); 
cho $ex->getLine(); // 4 


o getPrevious () — возвращает объект предыдущего исключения или null: 


$e = new ХЕхсербіоп("Сообшение"); 
$ex = new \Ехсерііоп('', 0, $e); 


cho $ex->getPrevious ()->getMessage(); // Сообщение 


o getTraceAsString () -- возвращает стек вызовов в виде строки; 
o getTrace () — возвращает массив со стеком вызовов: 


function test() { 


throw new \Exception(); 
} 
try { 
test(); 

} catch (\Exception $ex) { 


cho $ex->getTraceAsString(); 
// #0 C:\xampp\htdocs\index.php(8): таіп\ёеѕі () 
print_r ($ex->getTrace ()); 
// #1 {main} 
// Array ([0] => Array ([file] => C:\xampp\htdocs\index.php 
// [line] => 8 [function] => main\test [args] => Array ())) 


5.15.11. Пользовательские классы исключений 


Как вы уже знаете, классом исключения может выступать встроенный класс ис- 
ключения или пользовательский класс, наследующий встроенный класс исключе- 
ния. Основное преимущество использования классов для обработки исключений 
заключается в возможности указания базового класса для перехвата всех исключе- 
ний соответствующих классов-потомков. Обратите внимание: блок catch, В KOTO- 
ром указан объект производного класса, должен быть расположен перед блоком 
catch, в котором указан объект базового класса. 
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При разработке пользовательских классов исключений обычно наследуется класс 
Exception (листинг 5.117). 


Листинг 5.117. Пользовательские классы исключений 


<?php 
declare (strict_types=1) ; 
namespace main; 


class MyException extends \Exception { 
public function __construct ($msg="", $code=0, $prev=null) { 
if (strlen ($msg) === 0) 1 
$msg = "Ошибка класса МуЕхсерііоп'; 
) 
parent::__construct ($msg, $code, $ргеу); 
} 
} 
try { 


throw new MyException(); 


} catch (MyException $ex) { 
cho $ex->getMessage(); 


Результат выполнения: 


Ошибка класса МуЕхсерііоп 


5.15.12. Способы поиска ошибок в программе 


В предыдущих разделах мы научились обрабатывать ошибки времени выполнения. 
Однако наибольшее количество времени программист затрачивает на другой тип 
ошибок — логические ошибки. В этом случае программа запускается без ошибок, 
но результат выполнения программы не соответствует ожидаемому результату. 
Ситуация еще более осложняется, когда неверный результат проявляется лишь 
периодически, а не постоянно. Инсценировать ту же ситуацию, чтобы получить 
этот же неверный результат, бывает крайне сложно, и это занимает очень много 
времени. В этом разделе мы рассмотрим лишь основные способы поиска ошибок, 
а также дадим несколько советов по оформлению кода, что будет способствовать 
быстрому поиску ошибок. 


Первое, на что следует обратить внимание, — это форматирование кода. Начи- 
нающие программисты обычно не обращают на это никакого внимания, считая этот 
процесс лишним. А на самом деле зря! Интерпретатору абсолютно все равно, раз- 
местите вы все инструкции на одной строке или выполните форматирование кода. 
Однако при поиске ошибок форматирование кода позволит найти ошибку гораздо 
быстрее. 


Перед всеми инструкциями внутри блока должно быть расположено одинаковое 
количество пробелов. Обычно ставятся три или четыре пробела. От применения 
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символов табуляции лучше отказаться. Если все же вы их используете, то не следу- 
ет в одном файле совмещать и пробелы, и табуляцию. Для вложенных блоков коли- 
чество пробелов умножают на уровень вложенности: если для блока первого уров- 
ня вложенности использовались три пробела, то для блока второго уровня вложен- 
ности должно использоваться шесть пробелов, для третьего уровня — девять и т. д. 
Пример форматирования вложенных блоков приведен в листинге 5.118. 


| Листинг 5.118. Пример форматирования вложенных блоков 


$arr = 


foreach ($arr аз $a) { 
foreach ($a as $value) { 
echo "$value "; 
} 


echo "<br>\n"; 


Открываюшая фигурная скобка может быть расположена как на одной строке 
с оператором, так и на следующей строке. Какой способ использовать, зависит от 
предпочтений программиста или от требований по оформлению кода, принятых 
внутри фирмы. 

Вот пример размешения открываюшей фигурной скобки на отдельной строке: 


foreach ($агг ав 5а) 
{ 
foreach ($a аз $value) 
{ 
echo "$value "; 
} 
echo "<br>\n"; 
} 


Длина одной строки не должна содержать более 80 символов. Если количество 
символов больше, то следует выполнить переход на новую строку. При этом про- 
должение смещается относительно основной инструкции на величину отступа или 
выравнивается по какому-либо элементу. Иначе приходится пользоваться горизон- 
тальной полосой прокрутки, а это очень неудобно при поиске ошибок. 


Если программа слишком большая, то следует задуматься о разделении программы 
на отдельные функции или классы, которые выполняют логически законченные 
действия. Помните, что отлаживать отдельную функцию гораздо легче, чем 
«спагетти»-код. Причем, прежде чем вставить функцию (или класс) в основную 
программу, ее следует протестировать в отдельном проекте, передавая функции 
различные значения и проверяя результат выполнения. 
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Обратите внимание на то, что форматирование кода должно выполняться при его 
написании, а не во время поиска ошибок. Этим вы сократите время поиска ошибки 
и, скорее всего, заметите ошибку еше на этапе создания кода. Если все же ошибка 
возникла, то вначале следует инсценировать ситуацию, при которой ошибка прояв- 
ляется. После этого можно начать поиск ошибки. 


Причиной периодических ошибок чаще всего являются внешние данные. Напри- 
мер, если числа получаются от пользователя, а затем производится деление чисел, 
то вполне возможна ситуация, при которой пользователь введет число 0. Деление 
на ноль приведет к неправильному результату и предупреждающему сообщению. 
Следовательно, все данные, которые поступают от пользователей, должны прове- 
ряться на соответствие допустимым значениям. Если данные не соответствуют, то 
нужно вывести сообщение об ошибке, а затем повторно запросить новое число или 
прервать выполнение всей программы. 


Функции print r() И var dump() удобно использовать для вывода промежуточных 
значений переменных. В этом случае значения переменных вначале выводятся 
в самом начале программы и производится проверка соответствия значений. Если 
значения соответствуют, то инструкция с выводом перемещается на следующую 
строку программы и опять производится проверка и т. д. Если значения не совпали, 
то ошибка возникает в инструкции, расположенной перед инструкцией с выводом 
значения. Если ошибка допущена в пользовательской функции, то проверку значе- 
ний производят внутри функции, каждый раз перемещая инструкцию с выводом 
значений. На одном из этих многочисленных этапов ошибка обычно обнаружива- 
ется. В больших программах можно интуитивно догадаться о примерном располо- 
жении инструкции с ошибкой и начать поиск ошибки оттуда, а не с самого начала 
программы. 


Не забывайте, что интерпретатор всячески пытается помочь вам избежать ошибок 
в коде. Обязательно на этапе написания программы или при отладке включите мак- 
симальный режим отображения различных предупреждающих сообщений. Для 
этого достаточно добавить в самое начало программы следующие инструкции: 
<?php 

declare (ѕігісі іуреѕ=1); 


error герокбіпа(Е АШ); 
іпі ѕеї ('діѕріау егкогз', "Оп"); 


На этапе работы приложения следует отключить вывод ошибок в \еБ-браузер, 
чтобы не показывать конфиденциальную информацию пользователю, но при этом 
включить запись ошибок в файл: 

<?рһр 

іпі ѕеі ('еггог герогііпд', Е ALL); 


( 
іпі ѕеї('діѕріау еггогѕ', 'Off'); 
іпі ѕеї ('еггог 104", 'рһр еккок 104"); 
іпі ѕеі ("109 еггогз', "Оп"); 


Просматривайте этот файл регулярно. Как только в нем появились записи или ка- 
кие-либо предупреждающие сообщения отобразились в окне \!еБ-браузера, сразу 
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выполняйте поиск ошибок. В тексте сообщения указывается название файла и HO- 
мер строки, в которой содержится инструкция с ошибкой: 


І115-Ос%-2017 05:25:27 Europe/Moscow] РНР Warning: Division by zero іп 
C:\xampp\htdocs\index.php on line 9 


Как только вы увидели такую запись в файле, то вначале прочитайте описание 
ошибки. В приведенном примере говорится, что выполнено деление на ноль. От- 
кройте файл Сл\хатрр\ћіаосѕ\іпаех.рһр, отсчитайте 9 строк и посмотрите, что не так. 
Редактор Notepad++ позволяет пронумеровать инструкции, поэтому достаточно 
перейти к указанной в сообшении строке. Измените инструкцию таким образом, 
чтобы выполнить деление на ноль было невозможно. 


В некоторых случаях в строке, на которую указывает интерпретатор, нет ошибок. 
Например, в этом коде интерпретатор указывает на строку 5, хотя ошибка содер- 
жится в строке 4 (нет точки с запятой после инструкции): 


<?php 

Ѕагг = [1, 2, 3]; 

foreach ($arr as $value) { 
echo $value 


} 


Многие специализированные редакторы содержат специальное приложение, назы- 
Ваемое отладчиком, с помошью которого можно сделать процесс поиска ошибок 
очень эффективным. Например, отладчик позволяет выполнять программу по ша- 
гам, при этом контролируя значения переменных на каждом шаге. Отладчик также 
позволяет проверить, соответствует ли порядок выполнения инструкций разрабо- 
танному ранее алгоритму. что очень полезно при поиске логических ошибок. 


Применение отладки — это самый эффективный способ нахождения ошибок, не 
требующий вставки никаких инструкций вывода промежуточных значений в текст 
программы. В процессе отладки мы и так на каждом шаге можем наблюдать за зна- 
чениями всех или только избранных переменных. А после завершения отладки вам 
не придется удалять или временно отключать какие-либо инструкции. Пользуйтесь 
отладкой при возникновении любой ошибки, и вы очень быстро ее найдете и ис- 
правите. 


5.16. Работа с файлами и каталогами 


Очень часто нужно сохранить какие-либо данные. Для этого существуют два спо- 
соба: сохранение в файл и сохранение в базе данных. Первый способ подходит для 
сохранения информации небольшого объема. Если объем велик, то лучше (и удоб- 
нее) воспользоваться базой данных. 


Файлы используются при создании гостевых книг, списков рассылки, ленты ново- 
стей, протоколирования различных ситуаций (например, ошибок) и во многих дру- 
гих случаях. 
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Для чтения или записи файла нужно выполнить следующие действия: 

1. Открыть файл. 

2. Блокировать файл. 

3. Считать или записать данные. 

4. Сбросить буфер в файл (если что-то записывали). 

5. Снять блокировку. 

6. Закрыть файл. 

5.16.1. Открытие и закрытие файла 

Для открытия и закрытия файла предназначены следующие функции: 

О ғореп (<Путь к файлу>, <Режим>[, <Путь поиска>[, <Контекст>11) — открывает 


файл и возвращает дескриптор (идентификатор). Параметр <Режим> может при- 
нимать следующие значения: 


г — только чтение. После открытия файла указатель устанавливается на Ha- 
чало файла. Если файл не существует, функция fopen () вернет false; 


r+ — чтение и запись. После открытия файла указатель устанавливается на 
начало файла. Если файл не существует, функция Ғореп() вернет false; 


w— запись. Если файл не существует, то он будет создан. Если файл сущест- 
вует, то он будет перезаписан. После открытия файла указатель устанавлива- 
ется на начало файла; 


"+ — чтение и запись. Если файл не существует, то он будет создан. Если 
файл сушествует, то он будет перезаписан. После открытия файла указатель 
устанавливается на начало файла; 


а-- запись. Если файл не сушествует, то он будет создан. После открытия 
файла указатель устанавливается на конец файла. Содержимое файла не уда- 
ляется; 


а+ — чтение и запись. После открытия файла указатель устанавливается на 
конец файла. Если файл не существует, то он будет создан. Содержимое фай- 
ла не удаляется; 


х — запись. Если файл не существует, то он будет создан. После открытия 
файла указатель устанавливается на начало файла. Если файл существует, то 
функция Ғореп() вернет false; 


х+ — чтение и запись. Если файл не существует, то он будет создан. После 
открытия файла указатель устанавливается на начало файла. Если файл 
существует, то функция Еореп () вернет false; 


с — запись. Если файл не существует, то он будет создан. После открытия 
файла указатель устанавливается на начало файла. Содержимое файла не 
удаляется; 
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® с+ — чтение и запись. После открытия файла указатель устанавливается на 
начало файла. Если файл не существует, то он будет создан. Содержимое 
файла не удаляется. 


Обратите внимание: при возврате функцией Еореп() значения false ДОПОЛНИ- 
тельно генерируется предупреждение уровня Е WARNING. Подавить это преду- 
преждение позволяет оператор @. Если файл успешно открыт, то функция воз- 
вращает дескриптор ресурса: 


@$Е11е = fopen ("test Ғі1е.хі", "г"); 

var_dump ($file); // bool (false) 

@$Е11е = fopen("test_file.txt", "w"); 

var _dump ($file); // resource(3) of type (stream) 


var dump (is_resource ($file)); // bool (true) 

Кроме того, после указания режима может следовать модификатор: 
e р — файл будет открыт в бинарном режиме; 

e { — файл будет открыт в текстовом режиме. 


fclose (<Дескриптор>) — закрывает файл. 


5.16.2. Установка и снятие блокировки 


Функция Ғ1осК (<Дескриптор>, <Режим>[, &$wouldblock]) позволяет блокировать 
файл или снять блокировку. Если блокировка успешно установлена, функция вер- 
нет значение true. Параметр <Режим> может принимать следующие значения: 


o 


m 


LOCK SH ИЛИ 1 — разделяемый доступ для чтения. Если другой процесс хочет 
записать что-либо в файл, то ему придется подождать снятия блокировки; 


ОСК ЕХ ИЛИ 2 — МОНОПОЛЬНЫЙ режим для записи. Файл не доступен для совме- 


o 


CTHOTO использования; 


LOCK UN или 3 — снимает блокировку. 


Если файл блокирован, то процесс будет ждать снятия блокировки. Чтобы изме- 
нить это поведение, следует дополнительно указать константу LOCK мв: 


flock ($file, LOCK ЕХ | LOCK МВ); 


5.16.3. Чтение и запись файлов 


Для записи данных в файл предназначены следующие функции: 


o 


o 


fwrite (<Дескриптор>, <Строка>[, <Длина>]) -- записывает данные B файл И ВОЗ- 
вращает число записанных байтов ИЛИ false — В случае ошибки. 


fflush (<Дескриптор>) — сбрасывает содержимое буфера в файл. Вот пример 
записи в файл: 


@$Е11е = fopen('test_file.txt', 'wb') ог die ('Ошибка'); 
if (Е1оск($Е11е, LOCK ЕХ)) 1 // Устанавливаем блокировку 
fwrite ($file, 'Строка'); // Записываем данные 
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fflush ($file); // Сбрасываем буфер 
Ғ1осК ($#і1е, LOCK ОМ); // Снимаем блокировку 
} 
else echo "Не удалось установить блокировку"; 
fclose ($file); // Закрываем файл 


П ҒоргіпеҒ(<Дескриптор>, <Формат>[, <Данные>]) — записывает данные в файл в 
соответствии со строкой формата. Спецификаторы, используемые в строке фор- 
мата, мы рассматривали в разд. 5.7.18: 


@$5Е11е = fopen('filetmp.txt', 'wb'); 
fprintf ($file, '%.2Е', 10.5125484); 
fclose ($file); 


П file put_contents () — записывает данные в файл. Если файл не существует, то 
он будет создан. Если файл сушествует, то по умолчанию он будет перезаписан. 
Для записи в конец файла следует указать флаг FILE APPEND. Вызов функции 9K- 
вивалентен последовательности вызовов функций Ғореп(), fwrite() И fclose (). 
Формат функции: 


file ри сопёепёѕ (<Путь к файлу>, <Данные>[, <Флаг>[, <Контекст>]]) 


В параметре <Флаг> могут быть указаны следующие значения (или их комбина- 

ция): 

® FILE USE INCLUDE РАТН — поиск файла будет осуществлен в каталогах, пере- 
численных в директиве include_path; 


T 


© FILE APPEND — если файл существует, то данные будут добавлены в конец CO- 
держимого файла; 


Ф LOCK ЕХ — МОНОПОЛЬНЫЙ режим для записи. Файл не доступен для совместно- 
го использования. 


Пример: 


// Перезапись файла 

file put_contents ('test.txt', "Строка1\п", LOCK ЕХ); 
// Добавление в конец 
file _put_contents ('test.txt', "Строка2", LOCK ЕХ | FILE APPEND); 


Прочитать данные из файла позволяют следующие функции: 


o Егеаа (<Дескриптор>, <Длина в байтах>) — позволяет прочитать из файла строку 
указанной длины. Если функции не удалось прочесть заданное число байтов, 
она возвратит то, что удалось прочитать. Вот пример чтения из файла: 


@$Е11е = fopen('test_file.txt', 'rb') ог die ('Ошибка'); 


if (flock($file, ІОСК 5Н)) { // Устанавливаем блокировку 
$s = Егеаа ($Е11е, 100); // Читаем данные из файла 
есһо 55; // Строка 
flock ($file, LOCK ОМ); // Снимаем блокировку 


} 


fclose ($file); // Закрываем файл 
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П ғдебѕ (<Дескриптор>[, <Длина в байтах>1) — позволяет считывать из файла по 
одной строке за раз. Считывание будет выполняться до тех пор, пока не встре- 
тится символ новой строки (\п), конец файла или из файла не будет прочитано 
указанное число байтов. Если данных для чтения больше нет, функция вернет 
значение false: 


@$file = fopen('test.txt', 'гр') or а1е('Ошибка'); 

while ((55 = fgets ($file, 4096)) !== false) { 
echo $s; 

} // Строка1\пСтрока2 

fclose ($file); 


П Ғдесс(<Дескриптор>) — считывает из файла один байт. Если данных для чтения 
больше нет, функция вернет значение false; 


П feof (<дескриптор>) — возвращает значение true, если был достигнут конец фай- 
ла, и false — в противном случае; 


П ғі1е(<Путь к файлу>[, <Режим>[, <Контекст>11) — читает весь файл в массив, 
каждый элемент которого будет равен одной строке, прочитанной из файла. 
В параметре <Режим> могут быть указаны следующие константы: 


Ф FILE USE INCLUDE РАТН--- ПОИСК файла будет осуществлен в каталогах, пере- 


численных в директиве include_path; 


© FILE IGNORE NEW LINES — не добавлять СИМВОЛ НОВОЙ етроки в конец элемента 


массива; 


Ф FILE 5КІР ЕМРТҮ ІІМЕ5-- игнорировать пустые строки. 


Пример: 


т] 
Z 


$arr = file('test.txt', FILE IGNORI 
print_r ($arr); 
// Array ( [0] => Строка1 [1] => Строка2 ) 


ЕМ LINES); 


С гкеаағі1е(<Путь к файлу>[, <true | false>[, <Контекст>11) — открывает файл и 
выводит все его содержимое в окно УҮеВ-браузера. Если во втором параметре 
указано значение true, То поиск файла будет осуществлен в каталогах, перечис- 
ленных в директиве include_path: 


readfile('test.txt'); // Строка1\пСтрока2 


п І11е дес сопіёепёѕ (<Путь к файлу>[, <true | Ға1ѕе>[, <Контекст>[, <Начальная 
позиция> [, <Максимальная длина>1111) — возвращает содержимое файла в виде 
строки. В отличие от функции readfile() не выводит содержимое файла в окно 
\!еБ-браузера. Если в параметре <Флаг> указано значение true, то поиск файла 
будет осуществлен в каталогах, перечисленных в директиве include path. 


$5 = file дек сопеепез ('test.txt'); 
echo htmlspecialchars ($s, ЕМТ СОМРАТ | ЕМТ НТМЬ5, 'ОТЕ-8'); 


Для примера создадим файл file.txt и запишем в него пять адресов E-mail по одному 
на строчке (листинг 5.119). 
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Листинг 5.119. Создание файла и запись в него 


<?php 

$arr = ['maill@site.ru', 'mail2@site.ru', 'mail3@site.ru', 
'mail4@site.ru', 'mail5@site.ru']; 

$s = implode ("\п", $arr); 

@$file = fopen('file.txt', 'wb') or а1е('Ошибка'); 


if (flock($file, LOCK ЕХ)) { // Устанавливаем блокировку 
fwrite ($file, $s); // Записываем данные 
fflush ($file); // Сбрасываем буфер 
flock ($file, LOCK ОМ); // Снимаем блокировку 


} 

else echo "Не удалось установить блокировку"; 
fclose ($file); // Закрываем файл 
echo "Файл создан"; 


Если в процессе создания файла возникнет ошибка, то она будет подавлена опера- 
тором ё, а в окне \\еБ-браузера будет выведено сообщение Ошибка. При этом 
дальнейшая обработка файла будет остановлена. 


Теперь добавим новую запись в конец файла (листинг 5.120). 


Листинг 5.120. Добавление новой записи в конец файла 


<?php 

$mail = "\птаі16@ѕібе. ги"; 

@$file = fopen('file.txt', 'ар!'); 

if (is_resource ($#і1е)) { 

if (flock($file, LOCK ЕХ)) { 

fwrite($file, $mail) 
fflush ($file); 
flock ($file, LOCK ОМ); 


} 


е15е есһо 'Не удалось установить блокировку"; 
fclose ($file); 
echo "Операция произведена"; 


} 


else echo "Не удалось открыть файл"; 


В этом примере мы воспользовались функцией 15 гезочгсе(), которая проверяет, 
содержит ли переменная идентификатор ресурса. 


А теперь выведем содержимое файла в список (листинг 5.121). 


Листинг 5.121. Вывод содержимого файла в список 


<?php 
@$file = fopen('file.txt', 'rb'); 
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if 


(is_resource ($Е11е)) { 
if (Ғіоск(5Ғ11е, ІОСК 5Н)) { 
echo "<select>\n"; 
while ((55 = fgets ($file, 
echo '<option>'; 
echo htmlspecialchars ( 


echo "</option>\n"; 
} 
echo "</select>\n"; 
flock ($file, LOCK ОМ); 
} 


4096)) !== false) { 
були ($5), 
ЕМТ СОМРАТ | ЕМТ НТМІ5, "ОТЕ-8'); 


е15е есһо 'Не удалось установить блокировку"; 


} 


fclose ($file); 


else echo "Не удалось открыть файл"; 


Результат: 


<зе1 


<ор 
<ор 
<ор 
<ор 
<ор 
<ор 


Іесе> 

tion>maill@site.ru</option> 
tion>mail2@site.ru</option> 
tion>mail3@site.ru</option> 
tion>mail4@site.ru</option> 
tion>mail5@site.ru</option> 
tion>mail6@site.ru</option> 


</select> 


5.16.4. Перемешение указателя внутри файла 


Для каждого открытого файла существует особый указатель, помечающий в нем 
текущую позицию. Изменить позицию указателя внутри файла можно с помощью 
следующих функций: 


П кеміпа(<Дескриптор>) — устанавливает указатель на начало файла; 
П гегипсавге(<Дескриптор>, <Размер>) — обрезает файл до указанного размера; 
П гее11(<Дескриптор>) — возвращает позицию указателя относительно начала 


файла; 


O ғѕеек (<Дескриптор>, <Смещение> [, 


<Позиция>]) — устанавливает указатель в по- 


зицию, имеющую смещение <Смещение> относительно позиции <Позиция>. Пара- 
метр <Позиция> может принимать следующие значения: 


e SEEK SET — начало файла (по умолчанию); 


ө SEEK END — конец файла. 


ЗЕЕК СОК — текущая позиция указателя; 
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ПРИМЕЧАНИЕ 


При работе с кодировкой ОТҒ-8 следует учитывать, что корректной будет только ONE- 
рация установки указателя в начало или в конец файла. Любое промежуточное значе- 
ние может указывать на позицию внутри буквы, что при записи приведет к поврежде- 
нию данных. 


Пример перемещения указателя внутри файла приведен в листинге 5.122. 


Листинг 5.122. Перемещение указателя внутри файла 


<?рһр 

@5Е11е = fopen('file.txt', 'r+b'); 

Езеек ($file, 0, ЅЕЕК ЕМР); // В конец файла 

var dump (ftell($file)); // int (83) 

rewind ($file); // В начало 

var dump (ftell($file)); // int(0) 

fseek ($file, 5, ЅЕЕК СОБ); // 5 байтов от текушей позиции 
var dump (ftell($file)); // int(5) 


fclose ($file); 


5.16.5. Создание списка рассылки 

с возможностью добавления, изменения и удаления 
адресов E-mail 

В качестве примера работы с файлами рассмотрим создание списков рассылки. 
Включим возможность добавления НОВОГО E-mail, удаления и переименования 


существующих, а также выведем содержимое файла в поле <textarea>. Для этого 
создадим два файла: mail_script.inc (листинг 5.123) и тай.рһр (листинг 5.124). 


Листинг 5.123. Содержимое файла C:\xampp\php\includes\mail_script.inc 


<?рһр 
// Проверка E-mail на корректность 


function $е5Е еша11 ($email) { 
$pattern = '/^([а-20-9_.-]+) @ ([а-20-9-]+\\.)+[а-2] {2,6}$/130'; 
return preg_match ($pattern, $email); 

} 


// Проверка наличия E-mail. Возвращает индекс или -1 


function index email іп array ($email, &$arr) 1 
foreach ($arr as $i => $value) { 
if (strtolower ($email) === strtolower ($value) ) 
return $i; 
} 


return -1; 
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// Чтение файла в массив 
function read Ғі1е %о аггау ($раёћ 


ya 


if (!file exists ($path)) { // 


Если файл не сушествует 


throw new Ехсерііоп ("Файл не сушествует"); 


} 
@$arr = Е11е ($path, 


FILE IGNORE NEW L 
if (is_array($arr)) return бак 


INES | FILE_SKIP_EMPTY LINES); 


r; 


else throw new Exception ("Не удалось прочитать файл"); 


} 
// Сохранение массива в файл 
function save аггау to _ file ($path 


if ($st === false) 


throw new Ехсерііоп ('Ошибка: не удалось записать в файл"); 


} 

// Вывод содержимого файла 

function show emails ($path) { 
echo '<textarea cols="25" rows 
if (file_exists ($раіһ)) readfi 
else echo "Файл He найден"; 
echo '</textarea>'; 

} 

// Замена специальных символов 

function hsc ($56) { 
return htmlspecialchars ($str, 


} 


// Сообщение о не соответствии E-mail шаблону 


function bad email message ($email 
$msg = '<div style="color: red 
$msg .= 
return $msg; 


} 


// Добавление E-mail 


function ааа email ($path, $email) 
if (!test_email($email)) { 


{ 
sort ($агг, SORT_NATURAL | SORT_FLAG CASE); 
@$st = file ри сопіепіѕ ($path, implode ("\п", $агг), LOCK | 


, &$arr) 


="15">1 š 
le ($path) ; 


ЕМТ COMPAT | 


) { 


">E-mail ' 


{ 


hsc ($email); 


" не соответствует шаблону</аіу>\п"; 


return [һѕс($етаі1), bad email message ($ета11)]; 


} 


Ѕагг = read file Ко аггау(брав 


h); 


if (index email_in array ($email, багг) == -1) { 


Ş$arr[] = $email; 

ѕауе аггау о Ғі1е ($раёһ, $ 
$msg = '<div style="color: 
return ['', $msg]; 


arr); 


green">E-mail добавлен</діч>" 


ЕХ); 


ЕМТ НТМІ5, 'ОТЕ-8'); 


677 


678 


} 


Глава 5 
еізе { 
$msg = '<а1у style="color: red">E-mail был добавлен "; 
$msg .= "ранее</аіу>\п"; 


return [$еща11, $msg]; 


// Удаление E-mail 
function delete_email ($path, $email) ( 


} 


if (!беѕї еша11 (бепа11)) { 
return [һѕс($етаі1), bad email message ($ета11)]; 


} 

багг = read file Ко array ($path); 

Şindex = index email іп array ($email, Фагг); 

if ($index != -1) { 
unset (Ѕагг [$1п4ех]); 
save_array_to Ғі1е ($раёһ, Ş$arr); 


$msg = '<div style="color: green">E-mail удален</4іү>'; 
return ['', $msg]; 

} 

else { 
$msg = '<div style="color: red">E-mail не найден</дім>"; 


return [hsc ($email), $msg]; 


// Изменение E-mail 
function update_email ($path, $01А email, $пем email) { 


if (!test_email($old email)) { 
return [hsc($old email), hsc($new email), 
раа email message ($01а епаі1)]; 


} 
if (!беѕї еша11 (бпем етаі1)) { 
return [һѕс($01а email), hsc($new email), 


раа email message ($new_email)]; 


} 

Ѕагг = read Е11е Ко array ($path); 

$1п4ех = index епаі1 іп аггау($о1а email, $агг); 

1Е (біпдех == -1) { 
$msg = '<div style="color: red">E-mail не найден</аіү>'; 
return [һѕс($01а email), hsc($new email), $msg]; 


} 


if (index еша11 іп аггау($пем email, $агг) != -1) { 
$msg = '<а1у style="color: геа">Добавляемый E-mail '; 
$msg .= "зарегистрирован ранее</діу>"; 


return [һѕс($01а email), hsc($new email), $msg]; 
} 
else { 

Şarr[$index] = $new email; 
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вауе аггау о _file($path, Ş$arr); 


$msg = '<div style="color: green">E-mail '; 
$msg .= "изменен</діму>"; 
геёогп ['', '', $154]; 


?> 


Листинг 5.124. Содержимое файла тай.рһр 


<?рһр 

require_once "НТМІ5Неадег.іпс"; // Листинг 5.88 
require_once 'таі1 ѕсгірё.іпс'; // Листинг 5.123 

(пем НТМІ5Неааег ("Создание списка рассылки', ""))->вһом(); 


echo "<аіу>\п"; 
// Путь к файлу 
$path = 'file.txt'; 


if (isset($_GET['add'])) { 
бада = $_GET['add']; 
try { 
list ($ааӢа, $msg) = add email ($path, $add); 
} catch (Exception $e) { 


$msg = '<div style="color: red">'; 
$msg .= "{$e->getMessage () }</аіу>\п"; 
бада = ''; 


} 
echo $msg; 


} 


else Зада = ''; 
?> 
<!-- Выводим форму Добавить --> 


<form action="<?=$_SERVER ['СКІРТ МАМЕ '] ?>"> 
<input type="text" папе-"ада" уа1ае="<?=$ааа?>"> 
<input type="submit" уа1ае="Добавить"> 


</form> 
<?php 
if (isset($_GET['del'])) { 
$ае1 = $_GET['del']; 
Егу { 
1154 ($4е1, $msg) = delete етаі1 ($раёһ, $де1); 


} catch (Exception бе) { 
$msg = '<div style="color: red">'; 
$msg .= "{$e->getMessage () }</аіу>\п"; 
$del = '"; 
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echo $msg; 
} 
else $del = ''; 
922 
<!-- Выводим форму Удалить --> 
<form action="<?=$_SERVER['SCRIPT_NAME"' ] ?>"> 
<input type="text" name="del" уа1ае="<?=$ае1?>"> 


<input type="submit" уа1ае="Удалить"> 

</form> 

<?php 

if (isset($_GET['old email']) && isset($_GET['new email'])) 
$019 email = $_GET['old email']; 
$пем email = $_GET['new email']; 


Егу { 
list ($01а email, 5пем email, $msg) = 
update епаі1 ($path, $01а email, $пем email); 
} catch (Exception $e) { 
$msg = '<div style="color: red">'; 
$msg .= "{$e->getMessage () }</аіу>\п"; 
бо14 email = $new email = ''; 


} 

echo $msg; 
} 
lse 5о14 email = $new email = ''; 
?> 


<!-- Выводим форму Изменить --> 
<form action="<?=$_SERVER ['СКІРТ МАМЕ '] ?>"> 
<input type="text" папе-"о14 епаі1" уаїџе="<?=$014а ета11?>" 


ріасеһо1дег-"Старый Е-таі1"> 
<input type="text" папе-"пем email" уа1ае="<?=$пем ета11?>" 


рІасеһо1аег="Новый Е-таі1"> 

<input type="submit" уа1ае="Изменить"> 
</form> 
<!-- Выводим содержимое файла --> 


<?php show emails ($path); ?> 
</div> 
</body> 
</html> 
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Откроем в УҮ/еһ-браузере файл mail.php. С помощью предлагаемых им форм можно 
добавить новый E-mail, а также удалить или переименовать существующий. При- 
чем добавить можно только новый E-mail — если будет введен уже существующий 
E-mail, то в \!еБ-браузере отобразится соответствующее предупреждение. Кроме 
того, выполняется проверка на корректность введенного E-mail — если он не соот- 
ветствует шаблону, то также отобразится сообщение. Заменить E-mail можно толь- 
ко на E-mail, отсутствующий в файле. Таким образом, в файле будут записаны 


лишь уникальные адреса E-mail. 
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Как разослать письма по адресам E-mail из этого файла, мы рассмотрим при изуче- 
нии отправки писем с сайта (см. разд. 5.17.16). 


5.16.6. Чтение СӘУ-файлов. 
Преобразование С5У-файла в НТМІ.-таблицу 
При работе с таблицами (например, в Excel) есть возможность сохранения таблицы 


в формате CSV. В этом формате каждая строка будет содержать значения ряда 
ячеек таблицы, разделенных точкой с запятой. 


Например, таблица: 


1 3 4 
5 6 7 
9 10 11 12 


при сохранении в формате CSV будет выглядеть следующим образом: 
1;2;3;4 
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9%10:11%12 


Для чтения СЅУ-файлов предусмотрена функция fgetcsv (). Формат функции: 


Ғдеісзу (<Дескриптор>[, <Длина в байтах>|, <Разделитель>[, 
<Ограничитель>[, <Экранирование>1111) 


Если <Разделитель> не указан, то по умолчанию используется символ , (запятая). 
Если не указан <Ограничитель>, То по умолчанию используется символ " (кавычка). 
Если не определен параметр <экранирование>, То По умолчанию используется сим- 
вол \ (слеш). 


Функция fgetcsv() считывает из файла одну строку при каждом вызове. Считыва- 
ние будет выполняться до тех пор, пока не встретится символ новой строки (\п), 
конец файла или из файла не будет прочитано указанное число байтов. Строка 
будет разбита по разделителю <Разделитель> и помещена в возвращаемый массив. 


Если какая-либо ячейка содержит символ разделителя, то все содержимое ячейки 
обычно заключается в кавычки. Если используется другой символ, то он должен 
быть указан в параметре <Ограничитель>. 


Таким образом, при сохранении в формате CSV таблица следующего вида: 


1 2 3 4 


10 11 12;15 


будет выглядеть так: 
е ЗА 

5;6;7;8 

О НЫ 
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Чтобы преобразовать С5У-файл в НТМГ-таблицу, можно воспользоваться кодом, 
приведенным в листинге 5.125. 


Листинг 5.125. Преобразование С5У-файла в НТМІ.-таблицу 


<?php 

require_once 'HTML5Header.inc'; // Листинг 5.88 

$title = "Преобразование С5У-файла в НТМІ-таблицу"; 

$meta = '<style>table { border: black 1px solid; рогаег-зрасіпа: 0 }'; 


$meta .= ' td { border: black 1px solid; padding: 5px }</style>'; 
(new HTML5Header ($title, '', $meta))->show(); 
@$file = fopen('filecsv.csv', 'rb') ог die ("Ошибка!); 


flock ($file, LOCK ЭН); 
echo '<table>', "Ап"; 
while (($data = fgetcsv ($file, 1024, ';')) !== false) { 
$count = count ($data); 
if ($count > 0) { 
echo "<tr>\n"; 
for ($i = 0; $i < $count; $i++) { 
echo '<td>'; 
echo htmlspecialchars ($data[$i], ЕМТ COMPAT | ЕМТ НТМІ5, 
"ОТЕ-8'); 


echo "</td>\n"; 


} 
есһо "</Ег>\р"; 


} 

echo '</table>'; 

flock ($file, LOCK_UN); 
fclose ($file); 

echo '</body></html>'; 


Записать в файл строку в формате CSV позволяет функция fputcsv (). После записи 
вставляется символ перевода строки. Формат функции: 


Ерпесзу(<Дескриптор>, <Массив>[, <Разделитель>=','[, 
<Ограничитель>='"'[, <Экранирование>='\']]]) 


Пример: 

@$#і1е = Ғореп ('filecsv.txt', 'wb'); 
здава =“ т. то, 538%; 14,5]. 
fputcsv ($file, $data, ';', !"'); 


fclose ($file); 


Строка в файле будет выглядеть так: 


За" a 
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5.16.7. Права доступа в операционной системе UNIX 


Большинство хостинговых площадок используют операционные системы семейст- 
ва UNIX. В этой ОС каждому объекту (файлу или каталогу) назначаются права 
доступа для каждой разновидности пользователей: владельца, группы и прочих. 
Рассмотрим эту важную тему подробнее. 


Для файла или каталога могут быть назначены следующие права доступа: 
O чтение; 

8 запись; 

П выполнение. 

Права доступа обозначаются буквами: 

П r— файл можно читать, а содержимое каталога можно просматривать; 


С „— файл можно модифицировать, удалять и переименовывать, а в каталоге 
можно создавать или удалять файлы. Каталог можно переименовать или уда- 
Лить; 


O x— файл можно выполнять, а в каталоге можно выполнять операции над фай- 
лами, в том числе искать в нем файлы. 


Права доступа к файлу определяются записью типа: 
-rw-r--r-- 


Первый символ означает, что это файл, и не задает никаких прав доступа. Следую- 
щие три символа (хи) задают права доступа для владельца: чтение и запись. Сим- 
вол - здесь означает, что права доступа на выполнение нет. Следующие три симво- 
ла (х--) задают права доступа для группы: только чтение. Последние три символа 
(«--) задают права для всех остальных пользователей: только чтение. 


Права доступа к каталогу определяются такой строкой: 


drwxr-xr-x 


Первая буква (d) означает, что это каталог. Владелец может выполнять B каталоге 
любые действия (гих), а группа и все остальные пользователи — только читать и 
выполнять поиск (х-х). Для того чтобы каталог можно было просматривать, долж- 
ны быть установлены права на выполнение (х). 


Кроме того, права доступа могут обозначаться числом. Такие числа называются 
маской прав доступа. Число состоит из трех цифр: от 0 до 7. Первая цифра задает 
права для владельца, вторая — для группы, а третья — для всех остальных пользо- 
вателей. Например, права доступа -ги-г--г-- соответствуют числу 644. 


Сопоставим числам, входящим в маску прав доступа, двоичную и буквенную запи- 
си (табл. 5.1). 


Например, права доступа rw-r--r-- можно записать так: 110 100 100, что перево- 
дится в число 644. Таким образом, если право предоставлено. то в соответствующей 
позиции СТОИТ 1, а если нет — то 0. 
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Таблица 5.1. Права доступа в разных записях 


Восьмеричная цифра Двоичная запись Буквенная запись 


Для файлов, не являющихся ССІ-программами (таких как “.һіті, “.вһіті или “.рһр), 
права доступа могут быть установлены равными 644 (хч-к--к--)-- чтение и запись 
для владельца и только чтение для всех остальных. 


Для файлов, являющихся ССІ-программами (Регі-скрипты, скомпилированные про- 
граммы на языке С и прочие), права доступа должны быть установлены в 755 (rwxr- 
хг-х) — чтение, запись и исполнение для владельца и чтение и исполнение для всех 
остальных. 


Если \!еБ-сервер запускает РНР-скрипты от имени владельца, то для записи данных 
в файл вполне достаточно поставить на этот файл права доступа 600 (хи------- )— 
если, конечно, файл не предназначен для чтения всеми пользователями. 


Права доступа на каталоги рекомендуется устанавливать в 755 (rwxr-xr-x). 


Чтобы изменить права доступа из скрипта, необходимо воспользоваться функцией 
chmod (). Формат функции: 


chmod (<Путь к файлу>, <Права доступа>) 


Права доступа задаются в виде числа, перед которым следует указать 0 (это соот- 
ветствует восьмеричной записи числа): 


chmod ($path, 0644); 


Определить права доступа можно с помощью следующих функций: 


О іѕ геайар1е (<Путь>) — возвращает true, если файл доступен для чтения; 


О :5 игі+ар1е (<Путь>) — возвращает true, если файл доступен для записи; 


п із ехесабар1е (<Путь>) — возвращает true, если файл является выполняемым. 
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5.16.8. Функции для работы с файлами 
Рассмотрим основные функции для работы с файлами. 


o copy (<Копируемый файл>, <Куда копируем>[, <Контекст>]) — Позволяет скопиро- 
вать файл. Если файл существует, то он будет перезаписан. Функция возвращает 
true, если файл удачно скопирован: 


if (@copy('test.txt', 'test2.txt')) echo "Файл скопирован"; 


П rename (<Старое имя>, «Новое имя>[, <Контекст>1) — переименовывает файл или 
каталог. Если файл с новым именем существует, то он будет перезаписан. Если 
файл переименован, то функция вернет true: 


if (@гепаше ('test2.txt', 'test3.txt')) echo "Файл переименован'; 


О unlink (<lyrts>[, <Контекст>]) — позволяет удалить файл. Функция вернет true, 
если файл был удален: 


if (@unlink('test3.txt')) echo "Файл удален!; 


O file exists (<Путь>) — проверяет наличие файла или каталога. Значением функ- 
ции будет true, если файл найден: 


if (file_exists ('test.txt')) echo "Файл существует'; 


С is ғі1е(<0бьект>) — возвращает true, если объект является файлом: 


if (is_file('test.txt')) echo 'Файл'; 
П раѕепате (<Путь>[, <Суффикс>1) — возвращает имя файла без пути к нему: 


echo basename ('C:/xampp/htdocs/test.txt!'); 

// Выведет: test.txt 

echo basename ('C:/xampp/htdocs/test.txt', '.іхі!); 
// Выведет: test 


O dirname (<Путь>[, <Уровень>]) — возвращает путь к каталогу: 


echo dirname ('C:/xampp/htdocs/test.txt'); 

// Выведет: C:/xampp/htdocs 

echo dirname ('C:/xampp/htdocs/test.txt', 2); 
// Выведет: C:/xampp 


С realpath (<Относительный путь к файлу>) — преобразует относительный путь 
к файлу в абсолютный: 
echo геа1раїћ ('test.txt!'); 
// Выведет: C:\xampp\htdocs\test.txt 
Обратите внимание: функция также проверяет наличие файла, и если файла нет, 
то функция вернет значение false; 

С filesize (<Путь к файлу>) — возвращает размер файла: 


echo Ғі1езѕіле ("+еѕі.іхі!'); 
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O fileatime (<Путь к файлу>) — служит для определения времени последнего дос- 
тупа к файлу: 
$date = date ('d-m-Y', fileatime('index.php')); 
echo $date; // Выведет: 03-01-2018 
П ғіТесбіте(<Путь к файлу>) — позволяет узнать время создания файла: 
$date = date ('d-m-Y', filectime ('іпаех.рһр!')); 
echo $date; // Выведет: 03-01-2018 
С ғҒі1епбіте(<Путь к файлу>) — возвращает время последнего изменения файла: 


$date = date ('d-m-Y', filemtime ('index.php')); 
echo $date; // Выведет: 06-01-2018 


П touch($filename[, $time[, $atime]]) — устанавливает для файла время послед- 
него изменения. Если параметры Stime и $atime не указаны, то используется 
текушее время. Если файла нет, то он будет создан: 


touch ('index.php'); 


С ѕбаї (<Путь к файлу>) И fstat (<Дескриптор>) -- возвращают подробную инфор- 
мацию о файле в виде массива: 
var dump (stat ('1паех.рбр')); 
@$file = Ғореп ('іпаех.рһр', 'rb'); 
var _dump (fstat ($#і1е)); 
fclose ($file); 


5.16.9. Загрузка файлов на сервер 


Загрузка файлов на сервер осуществляется с помощью формы, у которой параметр 
епсеуре равен multipart/form-data. Создадим файл Ше Іоай.һіті с содержимым, при- 
веденным в листинге 5.126. 


Листинг 5.126. Содержимое файла йе Іоаа.Һті 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<title>3arpyska þaňzıos</title> 
</head> 
<body> 
<Һ1>Загрузка файлов</Һ1> 
<form action="file.php" method="POST" enctype="multipart/form-data"> 
<div> 
<input type="file" name="file_name"> 


<input type="submit" уа1ае="Загрузить"> 
</div> 
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</form> 
</body> 
</html> 


Далее создаем файл file.php и добавляем в него код, приведенный в листинге 5.127. 


Листинг 5.127. Содержимое файла file.php 


<?php 
if (isset($_FILES['file_name'])) { 
if ($_FILES['file_name'] ['error'] === 0 && 
$_FILES['file_name'] ['size'] > 0) { 
$path = "С: \\хатрр\\һаосѕ\\"; 
$path .- basename ($_FILES['file_name'] ['name']); 
if (@move uploaded file($_FILES['file_name'] ['tmp_name'], 
$path)) { 


echo "Файл успешно загружен"; 
) 
else { 

есһо 'Ошибка при загрузке"; 


) 

еізе есһо "Ошибка при загрузке"; 
} 
ргіпе к($ ЕІШЕ5); 


В адресной строке \!еБ-браузера набираем: http://localhost/file_load.html. При 
выборе файла с помощью кнопки Обзор и нажатии кнопки Загрузить выбранный 
файл будет отправлен серверу. Например, мы отправляем файл foto.jpg. Получив 
файл, сервер сохраняет его в каталоге для временных файлов и создает в супергло- 
бальном массиве $ FILES следующие элементы: 


Array ( 

[Е11е пате] => Array 

( 

name] => foto.jpg 
ype] => image/jpeg 
тр name] => C:\xampp\tmp\phpAECA. tmp 
error] => 0 
size] => 94967 


12 
E 


[ 
[ 
[ 
[ 
[ 


) 


Значение fi 1е папе здесь может изменяться — это название поля выбора файла 
В НТМЕ-форме, а остальные параметры неизменны, и соответствующие им элемен- 
ты ассоциативного массива содержат следующие данные: 


П name — первоначальное название файла; 
O type — МІМЕ-тип файла; 
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О tmp name -- путь и название временного файла; 
П з12е — размер файла; 


O error — код ошибки. Может принимать следующие значения: 


e 0 — UPLOAD ЕВВ_ОК — ошибок нет, файл был успешно загружен на сервер; 


Ф 1-- UPLOAD ERR ІМІ SIZE размер принятого файла превысил максимально 
допустимую величину, которая задана директивой upload шах filesize KOH- 
фигурационного файла php.ini; 


e 2— UPLOAD ERR FORM 5І2Е-- размер загружаемого файла превысил значение 
МАХ FILE SIZE, указанное в скрытом поле НТМЕ-формы; 


e 3— UPLOAD ERR PARTIAL — загружаемый файл был получен только частично; 
e 4— UPLOAD ERR ХО FILE — файл не загружен; 

e 6— UPLOAD ERR NO ТМР DIR — отсутствует временный каталог; 

e 7— UPLOAD ERR CANT WRITE — не удалось записать файл на диск; 

e 8— UPLOAD ERR EXTENSION — РНР-расширение остановило загрузку файла. 


Итак, файл загружен в каталог временных файлов. Теперь необходимо проверить, 
не возникло ли проблем с загрузкой. Если все в порядке, то переменная окружения 
$_FILES['file паше"] ['еггог'] будет содержать значение 0. Затем нужно скопиро- 
вать файл из каталога временных файлов в нужный каталог. Если файл не скопиро- 
вать из каталога временных файлов, то по завершении работы сценария он будет 
удален. Скопировать файл позволяет функция move uploaded file(). Формат функ- 
ции: 


move uploaded Е11е (<Загруженный файл>, <Куда копируем>) 


Функция перемешает загруженный файл в новое место, первоначально проверяя, 
является ли файл загруженным на сервер (переданным по протоколу POST). Если 
файл действительно загружен на сервер, он будет перемещен в место, указанное во 
втором параметре. Если он не является загруженным файлом, никаких действий не 
предпринимается, и функция возвращает false. Если файл, указанный во втором 
параметре, уже существует, он будет перезаписан. Если файл был успешно пере- 
мещен, то функция возвратит true. 


Если нужно загрузить сразу несколько файлов, то в НТМІ-форме после имени поля 
следует указать квадратные скобки (признак массива в РНР): 


<input type="file" папе-"І11е паме[]" 


> 
<input type="file" папе-"І11е пашме[]"> 
<input type="file" папе-"І11е пашме[]"> 


В этом случае суперглобальный массив $_FILES будет иметь следующую структуру 
(показан лишь фрагмент с ключом name): 


Array ( 
[Е11е пате] => Array ( 
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[name] => Array 
( 
[0] => foto.jpg 
[1] => foto2.jpg 
[2] => foto3.jpg 
) 


Фрагмент опушен 


) 


Таким образом, после имени переменной окружения нужно дополнительно указать 
индекс файла: $_FILES['file_name'] ['Ешр паше" 1101. Все остальное точно так же, но 
следует учитывать совокупный размер загружаемых файлов, который может быть 
превышен при загрузке сразу нескольких файлов. 


5.16.10. Функции для работы с каталогами 


Для работы с каталогами предусмотрены следующие функции: 


П пкаік(<Путь>|, <Права доступа>=0777[, <true |false>=false[, <Контекст>]]]) — 
создает новый каталог с правами доступа, указанными во втором параметре. 
Права доступа указываются в виде трехзначного числа, перед которым ставит- 
ся 0, — например, 0755. Если в третьем параметре указано значение true, ТО 
будут созданы все каталоги в пути. Если каталог создан, функция вернет значе- 
ние true, в противном случае — false: 


if (@mkdir('folder1', 0755)) echo "Каталог создан"; 
if (@mkdir ('folder2/filder3', 0755, true)) 
echo "Каталоги созданы"; 


С стат (<Путь>[, <Контекст>]) — удаляет пустой каталог. Если в каталоге есть 
файлы, то каталог удален не будет. Если каталог удален, функция вернет значе- 
ние true, в противном случае — false: 


if (@rmdir('folder1')) echo "Каталог удален"; 


П rename (<Старое имя>, «Новое имя>[, <Контекст>]) — переименовывает файл или 
каталог. Если каталог переименован, то функция вернет true: 


if (@гепаше ('folder2', 'Ғо1аег')) echo "Каталог переименован"; 
П сессча() — возвращает текущий рабочий каталог: 
ргіпе к(дебсма()); // C:\xampp\htdocs 
ОС chdir (<путь>) — делает указанный каталог текущим: 
chdir ('С:\\хапрр'); 
ргіпе г(деесма()); // С: \хатрр 
П орепаіх (<Путь>[, <Контекст>]) — открывает каталог для чтения. Функция воз- 


вращает дескриптор, который указывается в других функциях, или Ға1ве- 
в случае ошибки; 


o 


o 


Оооо 


О 
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readdir (<Дескриптор>) — считывает следующее имя объекта (файла или подка- 
талога); 


с1оѕеаіг (<Дескриптор>) — закрывает каталог: 


@5Ға = орепаіг ('С: \\хашрр\\БЕаос$'); 
if ($fd) { 
while ((бор) = геаааіг ($Еа)) !== false) 1 
$06) = htmlspecialchars ($06), 
ЕМТ СОМРАТ | ЕМТ НТМІ5, "ОТЕ-8'); 
echo "$obj<br>\n"; 


} 
closedir ($fd); 


} 


rewinddir (<Дескриптор>) — перемещает указатель в начало каталога; 

is_dir (<Объект>) — возвращает true, если объект является каталогом; 

15_Е11е (<Объект>) — возвращает true, если объект является файлом; 

із 1іпк(<Объект>) — возвращает true, если объект является символической 
ссылкой; 

ѕсапаіг (<Путь>[, <Сортировка>[, <Контекст>]]) — возвращает содержимое ка- 


талога в виде массива. Во втором параметре можно указать константы 
SCANDIR ЗОВТ МОМЕ (без сортировки), SCANDIR SORT_ASCENDING (сортировка по 
возрастанию, значение по умолчанию) и SCANDIR SORT DESCENDING (сортировка по 
убыванию): 


Şarr = scandir ('С: \\хашрр\\БЕЧосз', ЗСАМРТВ $ОВТ МОМЕ); 
ргіпе к(багк); 
багг = scandir ('C:\\xampp\\htdocs', SCANDIR 5ОКТ А5С 
ргіпе к(багк); 
багг = scandir ('C:\\xampp\\htdocs', ЗСАМРТВ 5ОКТ РЕЗСЕМРТМЮС); 
ргіпе к(багк); 


Бы) 


DING) ; 


діоь(<Шаблон>(, <Флаги>]) — возвращает массив с объектами, соответствующи- 
ми шаблону. В шаблоне можно указать следующие специальные символы: 


е ?— любой одиночный символ; 
е х — любое число любых символов; 


© [<Символы>] — Позволяет указать символы, которые должны быть на этом 
месте в пути. Можно вписать символы или указать диапазон через тире. 


Ж 


В параметре <Флаги> можно указать комбинацию констант GLOB MARK, 
GLOB NOSORT (без сортировки), GLOB МОСНЕСК, GLOB МОЕЗСАРЕ, GLOB BRACE, 
GLOB ONLYDIR (только каталоги) и GLOB ERR (остановиться при ошибке). Вот 
пример получения всех файлов с расширением php: 


Ѕагг = 9106 ('*.рһр'); 
ргіпе к(багк); 
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п DIRECTORY SEPARATOR — эта константа содержит символ-разделитель в пути: 


ргіпе к(РТВЕСТОВУ ЗЕРАВАТОВ); // Выведет в Windows: \ 


5.16.11. Создаем программу для просмотра 
всех доступных каталогов и файлов на диске 


Прочитаем содержимое каталога C:\xampp\htdocs и выведем его содержимое в окно 
\еб-браузера. Каталоги и файлы выведем отдельно, а для файлов укажем размер, 
дату создания и дату изменения файла. Кроме того, добавим возможность переме- 
щения по файловой системе с помощью гиперссылок и предусмотрим возможность 
использования русских букв в названиях каталогов и файлов. Для этого создадим 
два файла: діг ѕсгірііпс (листинг 5.128) и діг.рһр (листинг 5.129). 


Листинг 5.128. Содержимое файла C:\xampp\php\includes\dir_script.inc 


<?php 
function пем _url ($path) { 
$arr = explode('/', $path); 
if (count ($arr) > 1) { 
аггау рор($агг); // Удаляем последний элемент 
return implode('/', Ѕагг); 
} 
else return ''; 
} 
function read dir ($path, &$d, 855) { 
@5ЕА = opendir ($path); // Открываем каталог 
if ($fd) { 
chdir ($path); // Делаем каталог текушим 
while ((5ор) = readdir($fd)) !-- false) ( 
if (15 4аікс(5о53)) { // Если это каталог 
if (бор) != '.') { 
5а[] = $963; 


} 


elseif (із Ғі1е($00ј)) { // Если это файл 


$size = Ғі1еѕіхе ($057); 

$cdate = date ('d-m-Y', Ғі1есбіпе(5оБ3)); 
$mdate = date ('d-m-Y', filemtime ($obj)); 
$f[] = array($obj, $size, $cdate, $mdate); 


} 
closedir ($fd); // Закрываем каталог 


} 


else ехії ("Не удалось открыть каталог"); 
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// Замена специальных символов 
function hsc ($36) 1 
return htmlspecialchars ($str, ENT_COMPAT | ЕМТ НТМІ5, 'UTF-8'); 


?> 


Листинг 5.129. Содержимое файла діг.рһр 


<?php 
require_once ('HTML5Header.inc'); // Листинг 5.88 
гесліге опсе("Яік script.inc'); // Листинг 5.128 


// Выводим заголовок 
$style -<<<ТАВЕІ 
<style> 
table { border-spacing: 0; width: 100% } 
td { padding: 5px } 
h2 { text-align: center } 
.file_info tr:nth-child(2n) { background: #e8e8e8 } 
.file_info { border: black 1рх solid; border-collapse: collapse } 
.file_info td, .file_info th { border: black 1px solid } 
</style> 
LABEL; 
(new HTML5Header ('Просмотр каталогов', '', $style))->show(); 


$directory = array(); 
$files = array(); 
// Задаем путь по умолчанию 


if (!isset($_GET['path'])) $path = 'С:/хатрр/БЕдосз'; 
else $path = $_GET['path']; 
if (strlen ($path) == 0) exit('He задан путь"); 


// Получаем файлы и папки текущего каталога 
read dir ($path, $directory, $#і1еѕ); 

Şpath2 = пем _url ($path); 
// Кодируем все спецсимволы 
$path = urlencode ($path); 
$path2 = urlencode ($path2); 


// Выводим содержимое каталога 
?> 

<table> 
<tr><td style="width: 25%"> 
<Һһ2>Каталоги</Һһ2> 

</td><td> 

<Һ2>Файлы</Һ2> 

</td></tr> 

<tr><td style="vertical-align: top"> 
<?php 


Основы РНР. Создаем динамические И/еЬ-страницы 


For S= 0 SE 


echo '<a href="?path=' 


} 


еізе { 


echo '<а href="?path=' 


echo '">' 


} 
?> 


</td><td style="vertical-align: top"> 


count ($directory); $i < $c; $i++) { 
if ($directory[$i] == '..') { 


$path2 


hsc ($directory[$i]) 


<table class="file_info"> 


<tr 
<th 
<th 


<th style="width: 20%">Дата создания файла</һ> 

<th style="width: 20%">Дата последнего изменения</Еһ> 

</tr> 

<?php 

// Выводим названия файлов 

for (бі = 0, $c = count ($files); $i < $c; $i++) { 
echo '<tr style="text-align: center">', "\п"; 
echo '<td>' hsc ($Е11е$ [$1] [0]) "</td>\n"; 
echo '<td>' hsc ($#і1еѕ [51] [1]) "</td>\n"; 
echo '<td>' hsc ($Е11е$ [$1] [2]) "</td>\n"; 
echo '<td>' hsc ($Е11е$ [$1] [3]) "</td>\n"; 
echo "</tr>\n"; 


} 


echo "</table>\n"; 


if (count ($files 


echo '<div style="text-align: 


} 
?> 


style="width: 


) 


style="text-align: center"> 
style="width: 


$path . 


'">На уровень выше</а><рг><рг>'; 


urlencode ('/' 
"</а><рг>\п"; 


40%">Название файла</&һ> 
20%">Размер файла</&һ> 


== 0) { 


</td></tr></table> 


</body></html> 


$directory[$i]); 


center"><b>Her файлов</р></дім>"; 
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Откроем в Web-6paysepe файл dir.php. В окне браузера отобразится содержимое 
каталога C:\xampp\htdocs. С помощью имеющихся гиперссылок можно перемещаться 
между каталогами, отображая их содержимое, — почти как в программе Провод- 


ник в Windows. 


5.17. Взаимодействие с Интернетом 


В предыдущих разделах мы научились работать с локальным сервером, на котором 
расположена программа. Однако скрипт может взаимодействовать и с другими 
серверами, используя различные протоколы передачи данных. Например, по прото- 
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колу НТТР мы можем получить данные о погоде или курсе валют с другого сайта, 
по протоколу FTP — загрузить файлы на сервер и т. д. 


5.17.1. Диалог между У/ер-браузером и сервером 


Как вы уже знаете, данные формы могут быть отправлены либо методом сет, либо 
методом POST. При отправке по методу GET данные формы пересылаются путем их 
добавления к ОВГ-адресу после знака ?. При отправке по методу POST данные nepe- 
даются после всех НТТР-заголовков. Рассмотрим диалог между \!еБ-браузером 
и сервером более подробно. 


Предположим, у нас есть форма на странице http://Alocalhost/index.html: 


<form action="test.php" method="GET"> 
<input type="text" name="text1"> 

<input type="submit" уа]1ае="Отправить"> 
</form> 


При заполнении текстового поля и нажатии кнопки Отправить Web-6paysep посы- 
лает следующий запрос: 


СЕТ /test.php?text1=Tekst+v+pole НТТР/1.1 

Host: localhost 

User-Agent: Mozilla/5.0 (Windows NT 6.2; Win64; x64; rv:56.0) 
Gecko/20100101 Firefox/56.0 

Accept: text/html, application/xhtml+xml, application/xml; а=0.9,*/*; а=0. 8 

Accept-Language: ru-RU, ru;q=0.8,en-US;q=0.5,en;q=0.3 

Accept-Encoding: gzip, deflate 

Referer: http://localhost/index.html 

Connection: keep-alive 


Upgrade-Insecure-Requests: 1 


Обратите внимание на первую строку запроса. В ней первое слово обозначает Me- 
тод передачи данных. В нашем случае это метод сет. Далее следует строка запроса: 


/test.php?text1=Tekst+v+pole 


Здесь указывается путь от корня сайта к файлу-обработчику (test .php). После знака 
вопроса передается имя поля и его значение (textl=Tekst+v+pole). За строкой 
запроса идет название протокола (нттр/1.1). Доменное имя \!еБ-сайта передается 
в заголовке Host без указания протокола. 


Кроме этого, в запросе дополнительно указываются предпочитаемые МІМЕ-типы 
(заголовок Accept), поддерживаемые языки (заголовок Accept-Language), методы 
сжатия (заголовок Accept-Encoding), информация о самом М№еБ-браузере (заголовок 
User-Agent) и пр. 


Если изменить метод передачи с GET на POST, то запрос станет иным: 


POST /test.php НТТР/1.1 

Host: localhost 

User-Agent: Mozilla/5.0 (Windows NT 6.2; Win64; x64; rv:56.0) 
Gecko/20100101 Firefox/56.0 
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Accept: бех /һіт1, арр11са1оп/х1+хи1 , арр11саЕ1оп/хи1; а=0.9,*/*;а=0. 8 
Accept-Language: ru-RU, га; а=0.8, еп-05;4=0.5,еп;а=0.3 

Accept-Encoding: gzip, deflate 

Referer: http://localhost/index.html 

Content-Type: application/x-www-form-urlencoded 

Content-Length: 18 

Connection: keep-alive 


Upgrade-Insecure-Requests: 1 


text1=Tekst+v+pole 


В первой строке указывается метод передачи (POST), путь к файлу-обработчику от 
корня сайта (test.php) и название протокола (нттр/1.1). Сами данные формы nepe- 
даются после всех заголовков. Обратите внимание: данные формы от заголовков 
отделяет пустая строка. Длина переданных данных указывается в заголовке 
Content-Length, а метод их кодирования — в заголовке Content-Type. 


На этот запрос УҮеВ-сервер посылает следующий ответ: 


НТТР/1.1 200 ОК 

Date: Fri, 05 Jan 2018 21:43:56 СМТ 

Server: Арасһе/2.4.29 (Міп32) Ореп551/1.1.04 РНР/7.2.0 
X-Powered-By: РНР/7.2.0 

Content-Length: 66 

Keep-Alive: timeout=5, шах-100 


Connection: Keep-Alive 
Content-Type: text/html; charset=UTF-8 
Content-Language: ru 


В первой строке ответа сервера указывается название протокола (HTTP/1.1), а затем 
статус ответа (200) и его текстовое описание (ок). Статус 200 указывает, что запрос 
был успешно обработан. Приведем основные коды статуса: 


С 200 — запрос успешно обработан; 
O 301 и 302 — перенаправление на другую страницу; 

О 304 — с момента последнего запроса файл не изменялся; 

О 401 — пользователь не авторизован; 

О 403 — нет доступа. При отсутствии индексного файла в каталоге и отключенной 
ОПЦИИ Indexes директивы Options генерируется именно этот код; 

О 404 — ресурс не найден; 

С 500 — внутренняя ошибка сервера. 


В заголовке Content-Type указываются МІМЕ-тип (text/html) и кодировка переда- 
ваемых данных (UTF-8). С помощью заголовка Content-Length указывается длина 
передаваемых данных. Сами данные передаются после всех заголовков. Данные от 
заголовков отделяет пустая строка. 


Чтобы увидеть диалог \еБ-браузера с сервером, воспользуемся панелью Инстру- 
менты разработчика У/ер-браузера Firefox. Открываем панель, нажав комбина- 
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цию клавиш <Shift>+<F2>, щелкаем на значке с ключом левой кнопкой мыши 
и переходим на вкладку Сеть. Можно также сразу нажать комбинацию клавиш 
<Ctrl®>+<Shift>+<E>. Обновляем страницу и щелкаем мышью на строке запроса. 
Результат можно увидеть на рис. 5.1. Чтобы посмотреть заголовки без обработки, 
нажимаем кнопку Необработанные заголовки. 


ГЕ localhost/test.php?tet1=T Хх + 
€ | O localhost/test.php?tetl=Tekst+v+pole @ Q поо в + Aù 4 5 = 


Алтау ( [text1] => Tekst v pole ) Array () 


Га O Инспектор 07 Консоль O Отладчик {} Стили Є, профайле ДЕ ЕД В Хранилище <> DOM -AEROX 
м HTML CSS JS ХНЕ Шрифты Изображения Медиа Flash WS Прочее Отключить кэш Фильтр URL EI 


"928 Ме Фа Д... Пр Куки Параметры Ответ Тайминги 


ТТ URL запроса: http://localhost/test.php?textl=Tekst+v+pole 


Метод запроса: СЕТ 
Удалённый адрес: [: :1]:80 
Код состояния: Ф 200 ОК [Подробнее] Изменить и снова отправить Необработанные заголовки 
Версия: НТТР/1.1 
Фильтр заголовков 


Заголовки ответа (274 6) 


Date: Ри, 05 Jan 2018 21:47:55 GMT Подробнее 
Server: Арасһе/2,4.29 (Win32) OpenSSL/1.1.0g РНР/7.2.0 Подробнее 
X-Powered-By: РНР/7.2.0 

Content-Length: 48 Подробнее 
Keep-Alive: timeout=5, ппах=99 Подробнее 
Connection: Keep-Alive Подробнее | 
Content-Type: text/html; charset=UTF-8 Подробнее! 
Content-Language: ги Подробнее 


Заголовки запроса (404 6) 


Host: localhost Подробнее 
User-Agent: Mozilla/5.0 (Windows МТ 6.2; W...) беско/20100101 ҒігеҒох/56,0 Подробнее 
Accept: Фехі/һітпі,аррһсаноп/хһіті»хт...рісаноп/хті;4-0,2,7/%4-0.8 Подробнее 
Accept-Language: ги-Ё0Џ,ги;=0.8,еп-05;9=0.5,еп;9=0.3 Подробнее 
Accept-Encoding: gzip, deflate Подробнее 
Referer: http://localhost/index.html Подробнее! 
Connection: keep-alive Подробнее 
Upgrade-Insecure-Requests: 1 Подробнее 


@ 1запрос 486/48 6 передано Mep 


Рис. 5.1. Просмотр заголовков в Ү/ер-браузере Firefox 


5.17.2. Основные заголовки НТТР 


Заголовки НТТР предназначены для передачи некоторых дополнительных сведе- 
ний, например, при запросе файла \МеБ-браузером дополнительно указываются 
предпочитаемые МІМЕ-типы, поддерживаемые языки и кодировки, информация 
о самом \\!еБ-браузере и т. д. Сервер в свою очередь при выдаче файла указывает 
МІМЕ-тип файла, дату последней модификации файла, сведения о кодировке, язы- 
ке ит. д. 
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Приведем основные заголовки: 

O accept — МІМЕ-типы, предпочтительные для \еб-браузера: 
Accept: сехЕ/Б1, арр1ісаіоп/хһіт1 +хт1, application/xml; 
а=0.9,*/*;а=0.8 


О Accept-Language — список предпочтительных для \еБ-браузера языков: 


Accept-Language: ru-RU, ги; а=0.8, еп-05;4=0.5,еп;а=0.3 


О Accept-Encoding — список поддерживаемых \еБ-браузером методов сжатия: 


Accept-Encoding: gzip, deflate 
O con tent-Type — Тип передаваемых данных: 
Content-Type: text/html; charset=UTF-8 


П Content-Length — длина передаваемых данных при методе POST и длина ответа 
сервера: 


Content-Length: 18 


П соокіе-- информация об установленных cookies (отправляется У/ер-браузером): 


Cookie: п-12 


С Set-Cookie — запрос на установку cookies (отправляется сервером): 


Set-Cookie: п-12 


С сет — заголовок запроса при передаче данных методом GET; 
С роѕт — заголовок запроса при передаче данных методом POST; 
O Host — интернет-адрес хоста: 

Host: localhost 

П Last-Modified — дата последней модификации файла: 
Last-Modified: Thu, 19 Осі 2017 01:19:33 GMT 


П Location — перенаправление: при наличии этого заголовка М№МеБ-браузер обязан 
перейти по указанному ОКІ -адресу: 


Location: http://localhost/firm. php 

П Pragma — заголовок, управляющий кэшированием документа: 
Pragma: no-cache 

O Referer — содержит ОКІ -адрес, с которого пользователь перешел на наш сайт: 
Referer: http://localhost/index.html 

П Server — содержит название и версию программного обеспечения сервера: 
Server: Арасһе/2.4.29 (1032) Ореп551/1.1.0а4 РНР/7.2.0 

П User-Agent — содержит информацию об используемом \еБ-браузере: 


User-Agent: Мо7111а/5.0 (Windows МТ 6.2; №1064; x64; ку:56.0) 
Сеско/20100101 ҒігеҒох/56.0 
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Некоторые из этих заголовков Web-6paysep посылает серверу (например, Referer и 
User-Agent), другие используются в ответе сервера (например, Pragma ИЛИ Server), 
третьи могут пересылаться в обоих направлениях (скажем, Content-Length). 


5.17.3. Функция header() 


Функция header () позволяет добавить заголовок из программы. Формат функции: 


header (string $string[, bool $replace=true[, int $соае]]) : void 


В первом параметре указывается заголовок НТТР: 


<?php 
header ('Last-Modified: Thu, 19 Oct 2017 01:19:33 СМТ"); 


Если во втором параметре указано значение true, ТО предыдуший заголовок будет 
заменен. Значение false позволяет указать сразу несколько однотипных заголов- 
KOB. 


Третий параметр принудительно задает код ответа НТТР, хотя можно его указать 
и в первом параметре. Вот пример отправки заголовка «страница не найдена»: 


<?рһр 
header ('НТТР/1.1 404 Not Еочпа"); 


ВНИМАНИЕ! 


Так как функция ъеадег() устанавливает заголовки ответа сервера, которые посыла- 
ются до отсылки основного содержимого документа, то перед функцией не должно 
быть никаких операторов вывода. Даже пустая строка перед открывающим РНР- 
дескриптором (<?php) вызовет ошибку. Пустые строки внутри РНР-дескрипторов ошиб- 
ку не генерируют, поскольку вывод информации осуществляется только с помощью 
операторов вывода. Кроме того, при использовании кодировки ОТЕ-8 файл должен 
быть сохранен в кодировке ОТҒ-8 без ВОМ, иначе метка порядка байтов станет при- 
чиной ошибки. 


ПРИМЕЧАНИЕ 


Если включена буферизация вывода (см. разд. 5.1.6), то перед функцией header () MO- 
гут быть расположены операторы вывода, т. к. данные отправляются не сразу, а толь- 
ко при сбросе буфера. 


5.17.4. Перенаправление клиента на другой ЧЕ -адрес 


Чтобы перенаправить клиента на такой, например, URL: http://www.rambler.ru/, 
нужно написать следующий код: 

<?php 

header ("Location: http://www. гатр1ег.ги/"); 

exit(); 


Предположим, наш сайт содержит четыре страницы: index.php (главная страница), 
firm.php (о фирме), рисе.рнр (продукция) и contact.php (контактная информация). Pea- 
лизуем механизм навигации по сайту. Переход на другие страницы будет осушест- 
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вляться не с помощью ссылок, а путем выбора нужной страницы из списка. Для 
этого на всех страницах сайта должна присутствовать форма, приведенная в лис- 
тинге 5.130. 


Листинг 5.130. Навигация по сайту с помощью списка 


<form action="go.php"> 
<select name="page"> 


<option value="0" selected>Ha главную</орііоп> 
<option value="1">0 фирме</ореіоп> 

<option уа1ае="2">Продукция</орЕ1оп> 

<option value="3">KoHTaKTEK/option> 

</select> 

<input type="submit" value="Go!"> 

</form> 


Далее создаем файл до.рһр с кодом, приведенным в листинге 5.131. 


Листинг 5.131. Содержимое файла до.рһр 


<?php 
if (isset($_GET['page'])) { 
switch ($ СЕТ ['раде']) { 
case '1': 
header ('Location: http://localhost/firm.php'); ехії(); 
case '2':; 
header ('Location: http://localhost/price.php'); exit(); 
case '3': 
header ('Location: http://localhost/contact.php'); exit(); 
default: 
header ('Location: http://localhost/index.php'); exit(); 


} 
else { 
header ('Location: http://localhost/index.php'); exit(); 


Теперь при выборе страницы из списка и нажатии кнопки Со! мы попадем на нуж- 
ную страницу. Обратите внимание, что вместо оператора break мы использовали 
оператор exit, т. к. после перехода на нужную страницу выполнение остального 
кода просто лишено смысла. 


5.17.5. Запрет кэширования страниц 


Чтобы запретить кэширование документа, нужно послать сразу несколько заго- 
ЛОВКОВ: 
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// Дата в прошлом 

header ('Expires: Wed, 18 Oct 2017 23:17:32 СМТ'); 

// Дата последнего изменения прямо сейчас 

header ('Last-Modified: ' . отааїе ("р, d M Y Н:1:5") . " @MT'); 
// Запрет кэширования 

һеадег("Сасһе-Сопего1: no-store, no-cache, must-revalidate!) ; 


header ('Pragma: по-сасһе"); 


В заголовке Ехрігев можно указать значение 0, которое также означает «дата 
в прошлом»: 


header ('Expires: 0"); // Дата в прошлом 


Если вы думаете, что заголовков слишком много, то ошибаетесь. Иногда и их бы- 
вает недостаточно. Например, для браузера Internet Explorer можно дополнительно 
указать расширения post-check И рге-сһесх в заголовке Cache-Control, хотя в стан- 
дарте НТТР 1.1 их нет: 


header ('Cache-Control: no-store, no-cache, must-revalidate'); 
header ('Cache-Control: post-check=0, pre-check=0', false); 


Если после всех этих «плясок с бубном» оказалось, что контент все равно кэширу- 
ется, то следует добавить к URL дополнительный параметр со случайным значени- 
ем. Это практически всегда помогает! 


5.17.6. Реализация ссылки Скачать 


Очень часто на сайтах можно видеть две ссылки: Открыть и Скачать. Пусть у нас 
есть изображение в формате JPEG с именем photo.jpg. Реализовать первую ссылку 
достаточно просто: 


<a һгеі-"/рһоко.3ра4">Открыть</а> 
При переходе по ссылке изображение будет открыто без запроса сохранения файла. 


Реализовать вторую ссылку позволяет установка соответствуюших заголовков. Для 
этого нам понадобится промежуточный файл, например save.php. В документе раз- 
мешаем следуюшую ссылку: 


<a һкеі-"/заче.рһҺр">Скачать</а> 


А в файле вауе.рһр пишем код, приведенный в листинге 5.132. 


Листинг 5.132. Реализация ссылки Скачать 


<?php 
$path = 'photo.jpg'; 
if (!Ғі1е ехіѕіѕ ($path)) { 
echo "Файл He найден"; 
} 
else { 
$size = filesize ($path); 
header ('Content-Type: application/octet-stream'); 
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header ('Content-Length: ' . $size); 

header ('Content-Disposition: attachment; filename="' . $path . !"'); 
readfile ($path); 

exit(); 


При переходе по такой ссылке Web-6pay3ep выведет диалоговое окно с запросом 
«Что делать с файлом?» или сразу сохранит файл в каталог для загруженных фай- 
лов (в зависимости от настроек \!еЬ-браузера). 


ПРИМЕЧАНИЕ 


В HTML 5 тег <a> имеет параметр download, который говорит У/ер-браузеру, что доку- 
мент нужно скачать, а не открыть (см. разд. 1.7.1). 


5.17.7. Просмотр заголовков, отправляемых сервером 


Посмотреть заголовки, отправляемые удаленным сервером, позволяет функция 
get_headers (). Формат функции: 


дее һеадегѕ (<ОВТ-адрес>[, <Разбор заголовков>=0]) 


В параметре <овт-адрес> должен быть указан абсолютный путь к файлу: 


print_r(get_headers ('http://localhost/save.php')); 


По умолчанию функция возврашает список с необработанными заголовками: 


Аггау 

( 

-> НТТР/1.1 200 ОК 

=> Date: Екі, 05 Jan 2018 22:05:13 СМТ 

=> Server: Арасһе/2.4.29 (Win32) OpenSSL/1.1.0g РНР/7.2.0 
=> X-Powered-By: РНР/7.2.0 

Content-Length: 94967 

=> Content-Disposition: attachment; filename="photo.jpg" 
=> Connection: close 

=> Content-Type: application/octet-stream 


о чо олыо моно 
| 
У 


=> Content-Language: ги 


) 


Еслив параметре <Разбор заголовков> указать ненулевое значение, то функция вер- 
нет ассоциативный массив: 


print_r(get_headers ('http://localhost/save.php', 1)); 


Результат: 


Аггау 
( 
[0] => НТТР/1.1 200 ОК 
[Date] => Fri, 05 Jan 2018 22:07:18 СМТ 
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X-Powered-By] => РНР/7.2.0 
Content-Length] => 94967 


Connection] => close 
Content-Type] => application/octet-stream 


Content-Language] => ru 
) 


Server] => Apache/2.4.29 (Win32) OpenSSL/1.1.0g PHP/7.2.0 


Content-Disposition] => attachment; filename="photo.jpg" 
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Получить заголовки, отправленные \еБ-браузером, внутри программы позволяет 


функция apache request һеадекв(): 


ргіпе г(арасһе гедџеѕі һеадегѕ ()); 
Функция возвращает ассоциативный массив: 


Аггау 

( 

Host] => localhost 

User-Agent] => Mozilla/5.0 (Windows NT 6.2; Win64; 
Gecko/20100101 Firefox/56.0 


а-0.9,%/%;а-0.8 


x64; 


Accept-Encoding] => gzip, deflate 
Connection] => keep-alive 
Upgrade-Insecure-Requests] => 1 
Cache-Control] => max-age=0 


) 


Можно также воспользоваться переменной окружения 5 5 


foreach ($ ЗЕВУЕВ аз $key => $value) 1 
if (preg match ('/^HTTP_/isu', $Кеу)) 1 
echo "{$key} = {$value}\n"; 


} 
Результат: 


HTTP_HOST = localhost 
HTTP_USER_AGENT = Mozilla/5.0 (Windows NT 6.2; Win64; x 
Gecko/20100101 Firefox/56.0 


а=0.9,*/*;а=0.8 


ERV. 


Accept] => text/html, application/xhtml+xml, application/xml; 


Accept-Language] => ru-RU, ru;q=0.8,en-US;q=0.5,en;q=0.3 


ЕК: 


НТТР АССЕРТ ЕМСОРІМ№С = gzip, deflate 
HTTP_CONNECTION = keep-alive 
НТТР _ UPGRADE INSECURE REQUESTS = 1 


HTTP_CACHE CONTROL = max-age=0 


64; 


HTTP_ACCEPT_LANGUAGE = ru-RU, ru; а=0.8, еп-05;49=0.5, еп; а=0.3 


rv:56.0) 


HTTP_ACCEPT = text/html,application/xhtml+xml, application/xml; 


гу:56.0) 
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Как видно из результата, к именам заголовков добавляется префикс НТТР и вместо 
дефиса вставляется символ подчеркивания. 


Получить список заголовков. сформированных внутри программы, позволяют 
функции apache _ response headers () И headers list (): 


<?php 

header ('Last-Modified: Thu, 19 Oct 2017 01:19:33 СМТ"); 
print_r (headers_list()); 

Результат: 

Аггау 


( 
[0] => X-Powered-By: РНР/7.2.0 
[1] => Last-Modified: Thu, 19 Oct 2017 01:19:33 GMT 


5.17.8. Удаление заголовков 


Для удаления уже сформированного, но еще не отправленного, заголовка предна- 
значена функция header гепоче(), а проверить, были ли отправлены заголовки, 
позволяет функция һеадегѕ зеле(). Давайте удалим заголовок X-Powered-By, авто- 
матически сформированный РНР (листинг 5.133). 


Листинг 5.133. Удаление заголовка х-ронегеа-Ву 


<?php 
header ('Last-Modified: Thu, 19 Oct 2017 01:19:33 СМТ"); 
if (!headers_sent()) { 
header гепоче("Х-Ромегеа-Ву"); 
} 
print_r (headers_list()); 
Результат: 
Аггау 


( 
[0] => Last-Modified: Thu, 19 Oct 2017 01:19:33 GMT 


Если нужно полностью избавиться от версии РНР в заголовках ответа сервера, то 
в конфигурационном файле php.ini следует задать директиве expose_php значение Off: 


ехрозе рһр-ОҒҒ 


5.17.9. Работа с cookies 


\еб-браузеры позволяют сохранять небольшой объем информации на компьютере 
пользователя. Такая информация называется cookies. Помните, что возможность 
использования сооКіев можно отключить в настройках УУер-браузера. 
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Для записи cookies предназначена функция setcookie (). Формат функции: 


ѕеісоокіе (<Имя>, <Значение>(, <Время жизни>[, <Путь>[, <Домен>[, 
<НТТР5>[, <НТТР>]]]]]) 


Большинство параметров здесь необязательные. В третьем параметре указывается 
количество секунд с начала эпохи. Если не указано <Время жизни> Cookies, ТО ОНИ 
будут удалены сразу после закрытия \МеБ-браузера: 

зеесоокК1е ('уахг1', '12'); 


зеісоокіе ('уаг2', '15', time() + 60 * 60 * 24, "'/'); 


Последняя инструкция устанавливает cookies на один день для всех страниц. 


ВНИМАНИЕ! 


Так как функция ѕеёсоокіе () устанавливает заголовки ответа сервера, то перед функ- 
цией не должно быть никаких операторов вывода. Даже пустая строка перед откры- 
ваюшим РНР-дескриптором (<?php) вызовет ошибку. Кроме того, при использовании 
кодировки ОТҒ-8 файл должен быть в кодировке ОТҒ-8 без ВОМ. 


Считывание cookies осуществляется следующим образом: 


echo $ СООКІЕ ['уаг1'] ?? ''; 
echo $ СООКТЕ["уах2'] ?? ''; 


Все отправленные \!еб-браузером cookies без обработки доступны через перемен- 
ную окружения 5 ЗЕВУЕВ ['НТТР СООКІЕ']: 


ргіпе г(5 ЗЕВУЕВ [ 'НТТР_СООКТЕ']); // уах1=12; var2=15 


Если в директиве request огдег указана буква с (request огдег="СРС"), то cookies 
будут также доступны через суперглобальный массив $ REQUEST. По умолчанию 
в пакете XAMPP буква не указана, поэтому cookies через этот массив недоступны. 
Попробуйте в файл Массезз добавить следующую директиву: 


php value request_order "СРС" 


После этого через массив $_REQUEST можно увидеть все cookies: 


ргіпі к($ КЕООЕЗТ); 


Для удаления cookies следует установить cookies с прошедшей датой, причем napa- 
метры должны быть указаны такие же, как и при установке: 


setcookie('var2', '', time() - 3600, '/') 
Значение cookies при использовании функции setcookie() перед отправкой подвер- 
гается ОВГ-кодированию функцией urlencode() (см. разд. 5.7.17). Если нужно это- 


го избежать, то следует воспользоваться функцией зеігаисоокіе (), имеющей точно 
такой же формат, но не выполняющей ОВГ-кодирование автоматически: 


setrawcookie ('var3', rawurlencode ('текст'), Жіше() + 3600, '/') 
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5.17.10. Создаем 
индивидуальный счетчик просмотров 


В качестве примера работы с cookies создадим счетчик просмотров страницы сайта 
(листинг 5.134). 


Листинг 5.134. Счетчик просмотра страницы сайта 


<?php 

$count = $ СООКТЕ[ "раде у1емз'] ?? 0; 

$count++; 

ѕеісоокіе ("раде уіемѕ', $count, time() + 60 * 60 * 24 * 365); 
echo "Вы просмотрели страницу $count раз"; 


5.17.11. Разбор и кодирование ОКЕ -адреса 


Для разбора ОКІ-адреса на составные части предназначена функция parse чх1(). 
Формат функции: 


parse_url (string Ş$url[, int $сотропепе=-1]) : mixed 


Функция возврашает ассоциативный массив или значение false B случае ошибки: 


$url = 'http://localhost:80/index.php?x=5&y=3#metka'; 
print_r (parse_url($url)); 


Результат: 


Аггау 


( 
[scheme] => http 
[host] => localhost 
[port] => 80 

[path] => /index.php 
[query] => х=5&у=3 
[fragment] => metka 
) 


Если нужно получить только конкретный компонент, то во втором параметре нуж- 
но указать константы РНР URL SCHEME (протокол), PHP_URL HOST (домен), PHP_URL_ 
PORT (порт), РНР ОВЬ РАТН (ПУТЬ), РНР ОК ОЧЕВУ (строка запроса), PHP_URL FRAGMENT 
(якорь), РНР ОВЬ USER (пользователь) или РНР URL PASS (пароль). В этом случае 
функция вернет строку, число или значение null: 


$url = 'http://localhost:80/index.php?x=54y=3#metka'; 

var dump (parse_url ($url, РНР ОК 5СНЕМЕ)); // string(4) "http" 

var dump (parse_url ($url, PHP_URL HOST) ); // string(9) "localhost" 
var _ dump (parse_url ($url, PHP_URL_ PORT) ); // int (80) 

var dump (parse_url ($url, PHP_URL_ PATH) ); // string(10) "/index.php" 
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маг dump (parse_url ($url, РНР ОВЬ ООЕБУ)); // string(7) "х=5&у=3" 

var dump (parse_url ($url, PHP_URL FRAGMENT) ); // string(5) "metka" 

var dump (parse_url ($url, РНР ОВЬ USER) ); // NULL 

$url = 'ftp://user:123@localhost:21/index.php'; 

var dump (parse_url ($url, PHP_URL USER) ); // string(4) "user" 

var dump (parse_url ($url, РНР URL PASS) ); // string (3) "123" 

Сформировать закодированную строку запроса на основе массива или объекта по- 
зволяет функция http build query (). Формат функции: 


http build query (mixed $query даба[, string Ş$numeric prefix[, 
string $arg_separator[, int $enc_type]]]) : string 


В первом параметре указывается массив или объект. Во втором параметре можно 
указать префикс, который будет добавляться к числовым индексам списка. Пара- 
метр $агд зерагаког позволяет задать разделитель аргументов (по умолчанию 
используется символ 5). В параметре $епс type можно указать константы 
РНР ООЕВҮ КЕС1738 (символ пробела заменяется плюсом, значение по умолчанию) 
И РНР ООЕВУ ВЕСЗ986 (символ пробела заменяется комбинацией %20). 


зави = [№х' => 10; Tst => "кот*]; 

echo http build _query ($arr); // х-10685-%О0%ВА%00%ВЕ%01%82 
echo http build query ($arr, '', '&amp;'); 

// x=10&amp; s=%D0%BA%D0%BE%D1%82 

$arr = |"рыжий кот"|; 

echo http build query ($arr, 'var_', '&', PHP_QUERY КЕС1738); 
// var 0-%01%80%01%8В%00%В6%00%В8%00%В94-%00%9ВА%00%ВЕ%01%82 
echo http build query ($arr, "уак ', "8", РНР ОЧЕВУ КЕСЗ986); 
// var 0-%01%80%01%8В%00%В6%00%В8%00%В9%20%00%ВА%00%ВЕ%01%82 


ПРИМЕЧАНИЕ 


Если нужно выполнить МКІ-кодирование строки, то следует воспользоваться функ- 
ЦИЯМИ urlencode (), urldecode (), rawurlencode () И rawurldecode () (см. разд. 5.7.17). 


5.17.12. Получение информации из сети Интернет 


При рассмотрении функций для работы с файловой системой в разд. 5.16 мы оста- 
вили без внимания параметр <Контекст>. Все функции, имеющие этот параметр, по- 
зволяют работать не только с локальной файловой системой, но и с файлами, нахо- 
дящимися на другом сервере в Интернете. 


С помощью функций Ғореп(), Е11е() И file деф сопбепез() файл можно получить 
как по протоколу НТТР, так и по протоколу ЕТР. Для этого достаточно указать 
соответствующий протокол в ОКІ -адресе, переданном в качестве параметра <путь 
к файлу> этим функциям, — например, так: http://www.site.ru/file.txt. 


Для просмотра заголовков и параметров, отправляемых нашим роботом, создадим 
скрипт testrobots.php (листинг 5.135). 
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Листинг 5.135. Содержимое файла testrobots.php 


<?php 

print_r (apache_request_headers ()); 
echo "СЕТ: "; 

print_r($_GET); 

есһо "РОЅТ: "; 


ргіпе к(5 РОЅТ); 
echo "COOKIE: "; 
print_r($_COOKIE) ; 


Вот пример получения данных по протоколу НТТР методом сет: 


$5 = file _get_contents ('http://localhost/testrobots.php?x=10"'); 
echo "<pre>$s</pre>"; 


Результат: 

Array ( [Host] => localhost [Connection] => close ) 
GET: Array ( [x] => 10 ) 

POST: Array () 


COOKIE: Array () 


Как вам уже известно, в логах сервера отображается программное обеспечение 
клиента, сделавшего запрос. С помощью директивы user agent в файле php.ini MOX- 
но задать свое название. Для этого вместо строки: 


ѓоѕег адепе="РНР" 

нужно написать другую, например: 

user адепі-"Му5рійек/1.0" 

После этой настройки в первом массиве результата должна появиться запись: 
[User-Agent] => Му$р1аек/1.0 


При обработке больших файлов может потребоваться больше времени, чем задано 
по умолчанию (30 секунд). Увеличить время работы сценария можно с помощью 
директивы пах execution time: 


шах execution time=120 


Кроме того, следует учитывать, что с помошью директивы allow url_fopen МОЖНО 
запретить открытие внешних файлов. Для получения информации из сети Интернет 
значение директивы должно быть равно оп: 


а11ом игі Ғореп=Оп 


Заголовки запроса, а также различные параметры задаются с помощью объекта 
контекста. Создать этот объект позволяет функция stream сопіехі сгеаїе (): 


stream сопіехі сгеаѓе ([аггау $орііопѕ|, array $рагатз]]) : resource 


В первом параметре задаются опции контекста в виде ассоциативного массива, а во 
втором — ассоциативный массив с параметрами. Для каждого протокола существу- 
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ет свой набор опций и их очень много. Полный список опций смотрите в докумен- 
тации. 


Отправим данные методом GET и получим ответ с помощью функций Ғореп() и 
fgets () (листинг 5.136). 


Листинг 5.136. Передача данных методом сет 


<?php 
$options = | 
'http' => ['method' => "СЕТ", 
"Һеааег' => ['Ассері: text/html', 
"Соокіе: test=5'], 
"оѕег адепе' => 'Мубр1аег/1.0', 
'timeout' => 10.0 1 


1% 


$сопіехі = stream context_create ($options); 


$query = http build query(['x'" => 10, 's' => "кот!1); 
$host = 'http://localhost/testrobots.php?'" . $query; 
@$stream = fopen ($host, 'rb', false, $context); 
if ($stream) { 
echo '<рге>'; 
while ((55 = fgets ($ѕігеат, 4096)) !== false) ( 
echo $s; 


} 
print_r(stream сопіехі дес орёіопѕ ($зігеат)); 
ргіпе к(зЕгеам сопіехі дес рагатз ($ѕёгеат)); 
echo '</pre>'; 

fclose ($stream) ; 


} 
else { 
echo "Не удалось открыть поток"; 


В этом примере мы задали значения следующим опциям: 
O method — задает метод передачи данных; 


O һеадес-- позволяет добавить заголовки запроса. В качестве значения можно 
указать массив или строку, внутри которой заголовки разделены символами 


\r\nj 
П user_agent — задает значение заголовка User-Agent; 
О timeout — ограничивает время ожидания ответа сервера указанным значением. 


Получить значения опций потока или контекста позволяет функция stream 
сопкехЕ деб орїіопѕ (). Формат функции: 


stream сопіехі дес орііопѕ (resource 5зегеаш ог сопіехі) : array 
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С помощью функции stream context_get_params () можно посмотреть значения всех 
установленных параметров для потока или контекста. Формат функции: 


stream context дек рагашв (resource $stream ог context) : array 


Функция stream context вес орііоп() позволяет установить опции для потока или 
контекста, а функция stream сопбехе ѕеї рагашв() — задать параметры. 


Отправим данные методом POST и получим ответ с помощью функции file 
дес сопбепев () (листинг 5.137). 


Листинг 5.137. Передача данных методом POST 


<?php 
$query = http build query(['x'" => 10, 's' => "кот!1); 
$options = | 
'http' => ['method' => 'POST', 
'header' => 
'Content-Type: application/x-www-form-urlencoded', 
'Content-Length: ' . strlen ($query), 
"СооКіе: test=5'], 
'user адепе' => 'MySpider/1.0', 
'timeout' => 10.0, 


'content' => $query] 
1; 
Şcontext = stream сопбехЕ _create (); 
stream сопбехе зек орііоп ($сопіехі, $options); 


$host = 'http://localhost/testrobots.php'; 
@$str = file_get_contents ($host, false, context); 
if ($str !== false) echo "<pre>$str</pre>"; 


else echo 'Не удалось получить данные"; 


Обратите внимание: при передаче данных методом POST нужно дополнительно ука- 
зать заголовки Content-Type И Content-Length: 


Content-Type: application/x-www-form-urlencoded 


Content-Length: длина 

Строку с данными следует передать в качестве значения опции content, а не после 
знака вопроса в ОКГ-адресе: 

"сопбепе! => $query 

Если параметр <Контекст> не указан явным образом, то используется объект кон- 


текста по умолчанию. Получить объект контекста по умолчанию можно с помощью 
функции stream сопбехе дес default (). Формат функции: 


stream context_get_default (Тастау $орЕ1оп$]) : resource 
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Пример: 


Şcontext = stream сопіехі _get_default (); 
ргіпе к(вЕгеап сопбехе дек орііопэ ($сопіехі)); 


Функция stream соп-ехе вес даеҒач1Е() позволяет задать опции контекста по умол- 
чанию. Формат функции: 


stream context_set_default (array $options) : resource 


Отправим запрос методом GET и получим ответ с помощью функции file() (лис- 
тинг 5.138). 


Листинг 5.138. Установка опций контекста по умолчанию 


<?php 
$options_default = [ 
'http' => ['method' => "СЕТ", 
'header' => ['Accept: text/html'], 
'изег адепе' => 'MySpider/1.0', 
'timeout' => 10.0 1 


1; 
stream context_set_default ($options_default); 


@$arr = file ('http://localhost/testrobots.php'); 
Е ($arr !== false) ( 
echo '<pre>' . implode('', $arr) . "</рге>"; 


-- 


else echo "Не удалось получить данные"; 


5.17.13. Функция fsockopen() 


Функция fsockopen () дает возможность получить не только содержимое документа, 
но и все заголовки ответа сервера. Эта функция очень универсальна и позволяет 
открыть соединение не только с портом 80, но и с любым другим. Например, мож- 
но передать сообщение почтовому серверу на 25-й порт. Формат функции: 


fsockopen (<Хост>[, <Порт>[, <Номер ошибки>(, <Сообщение об ошибке>[, 
<Тайм-аут>]]]]) 


Функция устанавливает сетевое соединение и возвращает его дескриптор. Если со- 
единение не установлено, то функция возвращает false. Получить номер и сообще- 
ние об ошибке можно с помощью необязательных параметров <Номер ошибки> И 
<Сообщение об ошибке>. В необязательном параметре <тайм-аут> можно указать мак- 
симальное время, в течение которого производится попытка соединения (в се- 
кундах). Если параметр не указан, то значение будет взято из директивы 
default воскес Еішеове файла php.ini: 


default_socket_timeout=60 


Основы РНР. Создаем динамические М/ев-страницы 711 


Обратите внимание: параметр <тайм-аут> задает время ожидания только для соеди- 
нения. Чтобы задать тайм-аут для операций чтения и записи следует воспользо- 
ваться функцией stream set_timeout (). Формат функции: 


stream set_timeout (resource $ѕігеат, int $ѕесопаѕ[, 
int $microseconds=0]) : bool 


После установки соединения необходимо передать заголовки запроса. Между co- 
бой заголовки должны разделяться с помощью комбинации символов \r\n, а отде- 
ляться от тела запроса — с помощью комбинации \r\n\r\n. 


Открытым соединением можно манипулировать как обычным файлом с ПОМОЩЬЮ 
функций Ғдее5(), fwrite(), ҒеоҒ() и др. Закрыть соединение позволяет функция 
Ес1озе(). 


Функция stream зек БіосКкіпд() дает возможность установить режим блокировки 
соединения. Формат функции: 


stream set_blocking (<Дескриптор соединения>, <Режим блокировки>) 


Если режим равен true, то функции чтения будут ожидать полного завершения пе- 
редачи данных. Если указать false, ТО блокировка снимается. 


В качестве примера отправим запрос методом GET и выведем отдельно заголовки 
ответа сервера и содержимое ответа (листинг 5.139). 


Листинг 5.139. Отправка запроса методом сет 


<?php 
$query = http build query(['x'" => 10, 's' => "кот!1); 
$page = '/testrobots.php?' . $query; 


$port = '80'; 

$host = 'localhost!'; 

$header = "GET $page HTTP/1.1\r\n"; 

$header .= "Host: $host\r\n"; 

$header .= "User-Agent: MySpider/1.0\r\n"; 
$header .= "Accept: text/html, text/plain\r\n"; 
$header .= "Accept-Language: ru, ru-RU\r\n"; 
$header .= "Accept-Encoding: identity\r\n"; 
$header .= "Connection: close\r\n"; 

$header .= "Cookie: test=5\r\n"; 

$header .= "\r\n"; 

85Ғвоск = fsockopen ($host, $port, $err, Ѕегг text, 30); 
if ($fsock) { 


stream set_blocking ($fsock, true); 
stream set_timeout ($fsock, 5); 
fwrite ($fsock, $header); 

$15 реааег = true; 

$content = ''; 


$headers A 


712 


Гпава 5 


while (($buffer = fgets ($fsock, 1024)) !-- false) 1 
if ($buffer == "\r\n") { $is_header = false; 


if ($is_header) $headers .- Ş$buffer; 
else $content .= $buffer; 


} 


fclose ($fsock); 


} 


else { 


echo "Произошла ошибка (беге): {$егг ЖжехЕ)"; 


) 


echo "<р>Заголовки ответа сервера :</р><рг><рг>\п"; 


} 


echo "<pre>" . htmlspecialchars ($headers) . "</рге>\п"; 
echo "<рг><рг><р>Содержимое страницы: </р><рг><рг>\п"; 
echo "<pre>" . htmlspecialchars ($content) . "</pre>"; 


Обратите внимание на строку: 


$host = 'localhost'; 


Мы не указали протокол соединения, T. к. протокол http:// по умолчанию закреп- 


лен за 80-м портом. 


Если необходимо получить только заголовки ответа сервера, то вместо метода GET 


следует указать метод HEAD. Для этого строку: 


$header = "СЕТ $раде НТТР/1.1\ү\п"; 


нужно заменить на: 


$header = "HEAD 5раде HTTP/1.1\r\n"; 


Данные можно передать не только методами с 


ЕТИН 


EAD, НО И МЕТОДОМ POST, ИМИТИ- 


руя таким образом передачу данных формы. Рассмотрим это на примере (лис- 


тинг 5.140). 


Листинг 5.140. Передача данных методом POST 


<?php 
$query = http build query(['x'" => 10, '5' = 
$len = strlen ($query); 


"кот! 


1); 


браде = '/testrobots.php'; 

$port = 80"; 

$host = 'localhost!'; 

$header = "POST $page HTTP/1.1\r\n"; 

$header .= "Host: $host\r\n"; 

$header .= "User-Agent: MySpider/1.0\r\n"; 
$header .= "Accept: text/html, text/plain\r\n"; 
$header .= "Accept-Language: ru, ru-RU\r\n"; 
$header .= "Accept-Encoding: identity\r\n"; 
$header .= "Connection: close\r\n"; 

$header .= "Content-Type: application/x-www-form-urlencoded\r\n"; 
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$header .= "Content-Length: $len\r\n"; 
$header .= "Cookie: test=5\r\n"; 
$header .= "\r\n"; 


85Ғвоск = fsockopen ($host, $port, $err, Ѕегг text, 30); 
if ($fsock) { 

stream set_blocking ($fsock, true); 

stream set_timeout ($fsock, 5); 


fwrite ($fsock, $header); 

fwrite ($fsock, $query); 

$15 реааег = true; 

$content = ''; 

$headers = ''; 

while (($buffer = fgets ($fsock, 1024)) !== false) { 
if ($buffer == "\r\n") { $is_header = false; ) 
if ($is_header) $headers .- Ş$buffer; 
else $content .= $buffer; 


} 

fclose ($fsock) ; 
} 
else { 

echo "Произошла ошибка (беге): {$егг ЖжехЕ)"; 
} 


echo "<р>Заголовки ответа сервера :</р><рг><рг>\п"; 


echo "<pre>" . htmlspecialchars ($headers) . "</pre>"; 
echo "<рг><рг><р>Содержимое страницы: </р><рг><рг>\п"; 
echo "<pre>" . htmlspecialchars ($content) . "</pre>"; 
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В этом примере мы заменили метод передачи данных с GET на POST, отредактирова- 


ли значение переменной ӛраде: 
$page = '/testrobots.php'; 


и добавили два заголовка: 


$header .- "Content-Type: application/x-www-form-urlencoded\r\n"; 
$header .= "Content-Length: $len\r\n"; 


Первый заголовок имитирует передачу данных формы, а второй указывает длину 
данных, переданных методом POST. Сами данные мы передаем после всех заголов- 


KOB: 


fwrite ($fsock, $query); 


5.17.14. Использование библиотеки CURL 


Вместо рассмотренных функций для получения информации из сети Интернет 
можно воспользоваться библиотекой CURL (Client URL Library). Мы рассмотрим 
лишь работу с протоколом НТТР, но следует помнить, что библиотека позволяет 
работать и с другими протоколами, например с ЕТР. Кроме того, библиотека под- 
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держивает возможность взаимодействия с прокси-серверами. Полный список ее 
возможностей смотрите в документации. 


Чтобы использовать библиотеку CURL, нужно, чтобы в файле php.ini не было CHM- 
вола комментария (;) перед строкой: 


extension=php сиг1.911 


В РНР 7.2 строка выглядит так: 


extension=curl 


B библиотеку CURL входят следуюшие основные функции: 


С curl init ([<URL-azpec>]) — создает новый сеанс и возвращает идентификатор; 
O счигі с1озе (<Идентификатор>) — завершает сеанс; 
п curl_setopt (<Идентификатор>, <Параметр>, <Значение>) — устанавливает Napa- 


метры сеанса. 


<Параметр> может равняться одной из следующих констант, определяющих 
смыс 
ции): 


зло 
шо 


о 
с 


о 
с 


о 
с 


о 


e E 


07.02 
O с 
T 


Q 


z 


CU 


CU 


R 


R 


R 


R 


R 


ОРТ 


л параметра <Значение> (полный список констант смотрите в документа- 


ВТОРТ НТТР УЕВЗТОМ — задает версию протокола НТТР. Можно указать 
нстанты CURL НТТР УЕВУТОМ МОМЕ, CURL НТТР УЕВУТОМ 1 0 ИЛИ CURL НТТР_ 
ЕВУТОМ 1 1; 


г URL — ОКІ-адрес; 


RI 


ПОРТ 


ОРТ 


г PORT — номер порта; 


ОРТ 


Г ОЗЕВАСЕМТ — значение НТТР-заголовка User-Agent; 


Г РЕТОВМТВАМЗЕЕВ — если true, то функция curl ехес() будет возвра- 


RI 


ТОРТ 


БОРТ 


ать результат, а не выводить его сразу в \МеБ-браузер; 


Г TIMEOUT — максимальное время выполнения операции (в секундах); 


Г СОММЕСТТТМЕООТ — максимальное время ожидания установки соеди- 


ия (в секундах). Для снятия ограничения используется значение 0; 


КІ 
ответа 


RI 


ОРТ 


ПОРТ 


Г HEADER -- если true, то результат будет включать не только содержи- 


ое документа, но и заголовки ответа сервера; 


г NOBODY — если true, то результат будет включать только заголовки 
сервера. Запрос выполняется методом HEAD; 


ПОРТ 


Г НТТРСЕТ -- если true, ТО принудительно задает метод CET для запроса. 


Так как метод GET устанавливается по умолчанию, использовать этот Napa- 
метр нужно только в том случае, если ранее был задан другой метод передачи 
данных; 


СОВТОРТ_РОЗТ — если true, То запрос будет отправлен методом POST. Кроме 
того, 
application/x-www-form-urlencoded. Этот заголовок обычно используется при 
передаче данных формы; 


будет добавлен НТТР-заголовок Content-Type со значением 


o 
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® СОКТОРТ РОЗТЕТЕТО5 — строка, содержащая данные для передачи методом 


ОКТОРТ REFER] 


в — значение НТТР-заголовка Referer; 


pa 


— значение НТТР-заголовка Cookie; 


URLOPT_FOLLOWLOCATION — если true, то перенаправления будут обрабаты- 
аться автоматически; 


С 

e СОВГОРТ СООКІ 
с 
B 


® CURLOPT_MAXREDIRS — задает максимальное количество перенаправлений; 

e СОВГОРТ НТТРНЕАРЕВ — массив с дополнительными НТТР-заголовками; 

e CURLOPT FILE дескриптор файла, в который будет выведен результат опе- 
рации; 

® СОБІОРТ ИВТТЕНЕАРЕВ — Дескриптор файла, в который будут выведены полу- 
ченные заголовки; 

e CURLOPT_STDERR — дескриптор файла, в который будут выводиться сообщения 
об ошибках; 

сигі ехес(<Идентификатор>) -- выполняет запрос. Если параметр CURLOPT _ 


ВЕТОВМТВАМ$ЕЕВ имеет значение true, то функция curl ехес() будет возвращать 
результат, а не выводить его сразу в \еБ-браузер; 


curl _getinfo (<Идентификатор>[, <Параметр>]) — возвращает информацию о MO- 
следней операции. Если <Параметр> не указан, то функция возвращает ассоциа- 
тивный массив. Если <Параметр> равен CURLINFO НТТР СОПЕ, то функция возвра- 
maer последний полученный код НТТР. Если <Параметр> равен CURLINFO 
СОМТЕМТ ТҮРЕ, TO функция возвращает содержимое полученного заголовка 


Content-Type или значение null, если заголовка нет в ответе сервера. Полный 
список констант смотрите в документации; 


curl еггпо (<Идентификатор>) — возвращает код последней ошибки или 0, если 
ошибки не произошло; 
curl еггог (<Идентификатор>) — позволяет получить строку с описанием послед- 


ней ошибки. 


Пример запроса методом GET с получением содержимого документа и всех заголов- 
ков ответа сервера приведен в листинге 5.141. 


Листинг 5.141. Передача данных методом сет 


<?рһр 
$query = http build аџегу(['х' => 10, "5! => "кот!1); 
$url = 'http://localhost/testrobots.php?' . $query; 


@$сик1 = curl _init(); 
1Е (!сак1 егкпо(ӛсиг1)) 1 


curl_setopt ($curl, СОКІОРТ ОКІ, $url); 
curl_setopt ($curl, CURLOPT_USERAGENT, 'MySpider/1.0'); 
curl_setopt ($curl, CURLOPT_HEADER, true); 
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$headers = аггау ( 
"Ассерё: text/html, text/plain', 
'Accept-Language: ru, ru-RU', 


'Accept-Encoding: identity', 


'Connection: close', 
"Соокіе: test=5' 


); 


curl_setopt ($curl, СОКІОРТ НТТРН 
curl_setopt ($curl, СОКІОРТ КЕТОН 


$content = curl ехес($сиг1); 


if (!curl_errno($curl)) { 


ec. 
ec. 
ec. 
ec. 
ec. 
ec. 
ec. 


ho '<р>Код возврата:</р> '; 


ho '<br><br>'; 


curl close ($сиг1); 


} 
else { 
echo 


ЕАР. 


ЕВ, $headers); 
TRANSFER, true); 


һо curl_getinfo($curl, СОВЫТМЕО НТТР СОРЕ); 
һо '<рг><р>Заголовок Content-Type:</b> ң; 
ПО curl _getinfo($curl, CURLINFO CONTENT ТҮРЕ 


` 


ho "<р>Содержимое страницы: </р><рг><рг>\п"; 

ho "<рге>' . htmlspecialchars ($content) '</рге>'; 
{ 

ho "Произошла ошибка ' . curl _ errno ($curl) . ': 04; 
ho curl_error ($curl); 


"Произошла ошибка ' . curl errno (curl) . ': '; 


echo curl_error ($curl); 
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В ряде случаев достаточно получить только заголовки ответа сервера (лис- 
тинг 5.142). 


Листинг 5.142. Получение заголовков ответа сервера 


<?php 


$url = 'http://localhost/testrobots.php'; 


@$curl = 
if (!cur 


curl_setopt ($curl, CURLOPT_USERAG 


curl 111 ($url); 
l_errno ($curl)) { 


ENT, 


"Мү5рідег/1.0"); 


curl_setopt ($curl, СОКІОРТ НЕАРЕВ, true); 
curl_setopt ($curl, CURLOPT_NOBODY, true); 
$headers = array( 
'Accept: text/html, text/plain', 
'Accept-Language: ги, ru-RU', 


'Accept-Encoding: identity', 
'Connection: close' 
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curl_setopt ($curl, СОКІОРТ НТТРНЕАРЕВ, $headers); 
curl_setopt ($curl, CURLOPT_RETURNTRANSFER, true); 
$content = curl ехес ($сиг1 


if (!curl_ errno ($curl)) { 
echo "<р>Заголовки ответа сервера: </р><рг><рг>\п"; 


echo "<рге>" . htmlspecialchars ($content) . '</рге>!; 
) 
else { 

echo "Произошла ошибка ' . curl error ($curl); 


} 


curl close ($сиг1); 


} 
else { 
echo "Произошла ошибка ' . curl_error ($curl); 


Приведем также пример запроса методом POST, в котором мы не получаем заголов- 
ки ответа сервера, а только выводим содержимое страницы (листинг 5.143). 


Листинг 5.143. Передача данных методом POST 


<?php 
$url = 'http://localhost/testrobots.php'; 
@$сик1 = curl_init ($url); 
if (!curl_errno($curl)) { 
curl_setopt ($curl, CURLOPT_USERAGENT, 'MySpider/1.0'); 
curl_setopt ($curl, CURLOPT_HEADER, false); 
$headers = array( 
'Accept: text/html, text/plain', 
'Accept-Language: ги, ru-RU', 


"Accept-Encoding: identity', 
"Connection: close', 
"Соокіе: test=5' 
); 
curl_setopt ($curl, СОКІОРТ НТТРНЕАРЕВ, $headers); 
curl_setopt ($curl, CURLOPT_POST, true); 
$query = http build query(['x'" => 10, 's' => "кот!1); 
curl_setopt ($curl, CURLOPT_POSTFIELDS, $query); 
curl_setopt ($curl, CURLOPT_RETURNTRANSFER, true); 
$content = curl ехес($сиг1); 


if (!curl_errno($curl)) { 

echo "<р>Содержимое страницы: </р><рг><рг>\п"; 

echo "<рге>" . htmlspecialchars ($content) . "</рге>!; 
) 
еізе { 

echo "Произошла ошибка ' . curl error ($curl); 
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curl close ($curl); 


} 
else { 
echo "Произошла ошибка ' . curl_error ($curl); 


5.17.15. Отправка писем с сайта 


Отправить письма с сайта позволяет функция паі1 (). Формат функции: 


па11 (<Е-па11 получателя>, <Тема>, <Сообщение>[, <Заголовки>(, <Параметры>11) 


Функция возвращает true, если письмо отправлено. 


Чтобы письма отправлялись адресатам, нужно дополнительно настроить програм- 
МУ sendmail. На сервере хостинг-провайдера эта программа практически всегда 
установлена и настроена. Программа sendmail входит также в состав пакета 
XAMPP (С\хатрр\ѕепатай), но она нуждается в дополнительных настройках и по 
умолчанию не подключена, поэтому письма отправляться не будут. 


Вместо настройки программы sendmail мы будем сохранять письма в файл. Для 
этого в конфигурационном файле php.ini находим строку: 


¡sendmail_path = 
и заменяем ее на: 


sendmail path = "C:/xampp/mailtodisk/mailtodisk.exe" 


Отправляемые письма будут сохраняться в каталог C:\xampp\mailoutput в виде тексто- 
вых файлов. 


В параметре <Заголовки> обычно указываются следующие заголовки: 
П From— имя и обратный адрес отправителя: 


From: Nik <user@mail.ru> 


O Content-Type -- МІМЕ-тип и кодовая таблица: 


Content-Type: text/html; charset=windows-1251 


Заголовки должны быть разделены комбинацией символов \r\n. Если в тексте за- 
головков присутствуют русские буквы, то текст следует зашифровать с помошью 
метода вазеб4 следующим образом: 


-?<Кодировка>?В?<Зашифрованный текст>?- 


Зашифровать текст с помощью метода Base64 позволяет функция раѕеб4 епсоде(): 


$subject = "Сообшение"; 
$subject = iconv ("ОТЕ-8", "м1раомз-1251//ТСМОВЕ", $subject); 
$subject = "=?windows-1251?B?" . раѕеб4 епсоде ($subject) . "?="; 


Расшифровать зашифрованный ранее текст можно с помощью функции 
Базеб4 decode (): 
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$subject = Базеб4 encode ("Сообщение"); 
echo base64 decode ($subject); 


Зашифровать текст с помощью методов Base64 ИЛИ Quoted-Printable позволяет 
функция mb encode шіпеһеадек() (см. разд. 5.7.17). Формат функции: 


пр encode шіпеһеадек(<Строка>(, <Кодировка>[, <Метод кодирования>[, 
<Символ перевода строк>[, <Отступ>1111) 


Пример: 


пр іпбсекпаі епсоаіпо ("ОТЕ-8'); 

$subject = "Сообшение"; 

echo mb _encode_mimeheader ($subject); 

// Выведет: =?ОТЕ-8?В?ОКНОУЕС+0ТНВ19С101309МС1 ?= 


Текст сообщения шифровать необязательно. А вот кодовую таблицу символов 
следует указать в заголовке Content-Type. Также необходимо учитывать, что длина 
одной строки не должна превышать 70 символов. Строки отделяются друг от друга 
комбинацией символов: \r\n. 


Любое письмо может быть отправлено в виде обычного текста (листинг 5.144), а 
также в формате HTML (листинг 5.145). В первом случае указывается МІМЕ-тип 
text/plain, а во втором — text/html. 


В качестве примера отправим письмо с подтверждением регистрации. 


Листинг 5.144. Пример отправки письма в виде обычного текста 


<?php 

$msg = "Здравствуйте! \х\п\к\п"; 

$msg .= "Вы успешно зарегистрированы. \r\n\r\n"; 
$msg .= "http://www.site.ru/\r\n"; 

$msg .= "support@site.ru"; 


$msg = iconv ("ОТЕ-8", "windows-1251//IGNORE", $msg); 
$headers = "Content-Type: text/plain; charset=windows-1251\r\n"; 


$headers .- "From: Support <support@site.ru>"; 

$subject = 'Сообщение'; 

$subject = iconv ("ОТЕ-8", "windows-1251//IGNORE", $subject); 
$subject = "=?windows-1251?B?" . base64_encode ($subject) . "?="; 
mail ('уазуа@та11.га', $subject, $msg, $headers); 


Отправленное письмо (с заголовками) будет выглядеть следуюшим образом (файл 
с текстом письма сохраняется в каталоге С\хатрр\тайошрий: 


То: уазуа@па11.ги 

Subject: -?міпбом5-1251?2В?0е744ҒЕп17е41?- 
X-PHP-Originating-Script: 0:index.php 
Content-Type: text/plain; charset=windows-1251 
From: Support <support@site.ru> 


720 Гпава 5 
Здравствуйте! 
Вы успешно зарегистрированы. 


http://www.site.ru/ 
support@site.ru 


Листинг 5.145. Пример отправки письма в формате HTML 


<?рһр 

mb_internal_encoding ("ОТЕ-8'); 

$msg = "3mpasctTByŽTe!<br><br>\n"; 

$msg .= "Вы успешно зарегистрированы. <«рг><рг>\п"; 

$msg .= "<a href=\"http://www.site.ru/\">http://www.site.ru/</a><br>\n"; 
$msg .= "support@site.ru"; 

$headers = "Content-Type: text/html; charset=UTF-8\r\n"; 

$headers .- "From: Support <support@site.ru>"; 

$subject = 'Сообщение'; 


$subject = шр encode mimeheader ($subject) ; 
mail ('уазуа@та11.ка', $subject, $msg, $headers); 


5.17.16. Рассылка писем no адресам E-mail из файла 


При изучении работы с файлами мы создали файл file.txt со списком рассылки и 
механизм работы с ним (см. разд. 5.16.5). Теперь рассмотрим возможность рассыл- 
ки писем по адресам E-mail из этого файла (листинг 5.146). 


Листинг 5.146. Рассылка писем 


<form action="<?=$_SERVER [' SCRIPT_NAME" ] ?>"> 
<input type="hidden" name="send" value="1"> 


<input type="submit" уа1ае="Разослать"> 


</form> 

<?php 

if (isset($_GET["send"])) { 
require once 'таі1 script.inc'; // Листинг 5.123 
Егу { 


багг = read file to_array('file.txt'); 


} catch (Exception $e) { 
xit (Ѕе->деЕМеѕѕаде ()); 


} 
$msg = "Добрый день !\r\n\r\n"; 


$msg .= "Новости нашего caŭňrta.\r\n\r\n"; 
$msg .= "http://www. site.ru/\r\n"; 
$msg .= "mail@site.ru"; 


$msg = iconv ("ОТЕ-8", "windows-1251//IGNORE", $msg); 
$headers = "Content-Type: text/plain; charset=windows-1251\r\n"; 
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$headers .- "From: News <mail@site.ru>"; 


$subject = "Новости сайта"; 
$subject = iconv ("ОТЕ-8", "windows-1251//IGNORE", $subject); 
( 


$subject = "=?windows-1251?B?" . раѕеб4 encod 


foreach ($arr as $email) { 


} 


if (test етаі1 ($етаі1)) 1 


8 


ша11 (бела11, $subject, $msg, $headers); 


echo 'Сообщения разосланы"; 


$subject) . "?="; 
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При нажатии кнопки Разослать на все адреса E-mail из файла будет отправлено 
письмо. 


ВНИМАНИЕ! 


С локальной машины письма отправлены не будут, т. к. мы не настраивали программу 
отправки писем sendmail (СЛхатрр\зепатай). На сервере хостинг-провайдера эта npo- 
грамма практически всегда установлена и настроена. Правда, число одновременно 
отправленных писем часто ограничено. 


При рассылке в письме обязательно должна быть предусмотрена возможность 
отписаться от рассылки. И запомните — рассылка спама в Интернете запрещена. 


Под спамом понимаются письма, не запрошенные получателем явным образом. 


5.18. Обработка данных формы 


Рассмотрим способы обработки данных каждого элемента формы по отдельности. 
Напомним, что о работе с полями для выбора файла мы уже говорили в разд. 5.16.9. 


5.18.1. Текстовое поле, поле ввода пароля 
и скрытое поле 


После отправки формы, содержащей поля: 


<input type="text" name="txt"> 


<input type="password" name="passw"> 


<input type="hidden" name="hid" value="5"> 


в зависимости от метода передачи данных на сервере будут созданы следуюшие 
переменные окружения: 


П метод сет: 
5 СЕТ [ " txt" ] 
$ СЕТ["раззм"] 
$ СЕТ [ " hid" ] 
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O метод POST: 


$_POST["txt"] 
$_POST ["passw"] 
$_POST["hid"] 


Название массива совпадает с методом передачи данных, а имя ключа — со зна- 
чением параметра папе тега <input>. Все переданные данные, вне зависимости от 
используемого метода, доступны через массив 5 REQUEST. 


Предположим, что в эти поля в сценарии необходимо ввести первоначальные зна- 
чения. Здесь нас может подстерегать проблема. Если вывести так: 


$str = "Группа "Кино"'; 
echo '<input type="text" name="txt" value="! . $str . '">'; 


то в результате поле будет содержать текст "Группа ", a He "Группа "Кино"", 


Помните, что при подстановке значений все специальные символы в строке следует 
заменить НТМГ-эквивалентами. Кроме того, значение должно быть расположено 
внутри кавычек. Правильно будет так: 


$str = "Группа "Кино""; 
$56г = htmlspecialchars($str, ЕМТ СОМРАТ | ЕМТ НТМІ5, 'ОТЕ-8'); 
echo '<input type="text" name="txt" value="! . $str 2 '">'; 


НТМІ.-код будет выглядеть следующим образом: 


<input type="text" паше="Е хе" уа1ае="Группа &quot;KnHo&quot; "> 


5.18.2. Поле для ввода многострочного текста 


После отправки формы: 
<textarea name="txt">TekctT</textarea> 
в зависимости от метода передачи данных на сервере будут созданы следуюшие 
переменные окружения: 
П метод GET: 
$ СЕТ "хе" ] 
П метод POST: 
$_POST["txt"] 


Предположим, что в поле ввода многострочного текста необходимо ввести в сцена- 
рии первоначальное значение. Это можно сделать так: 


$str = "Привет всем"; 
echo '<textarea name="txt" со15-"15" гомз="10">' . $str . '</textarea>'; 


Однако если строка содержит теги, то могут возникнуть проблемы. Поэтому все 
специальные символы в строке следует заменить НТМГ-эквивалентами: 


$str = "Поивет </textarea> всем"; 
5вег = htmlspecialchars($str, ЕМТ СОМРАТ | ЕМТ НТМІ5, "ОТЕ-8"); 
echo '<textarea name="txt" со15-"15" гомз="10">' . $str . '</textarea>'; 
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5.18.3. Список с возможными значениями 


После отправки формы, содержащей список: 


<select папе-"со1ок"> 
<option value="1">White</option> 


<option>Red</option> 
</select> 


в зависимости от метода передачи данных на сервере будут созданы следуюшие 


пер 


еменные окружения: 


П метод GET: 


$ СЕТІ"со1ок"| 


ПІ метод POST: 


$ РОТ ["со1ог"] 


Название массива совпадает с методом передачи данных, а имя ключа — со зна- 


чен 


ием параметра name тега <ѕе1есі>. Все переданные данные вне зависимости от 


используемого метода доступны через массив 5 ВЕОЧЕЗТ. 


Зна 


чение переменной будет присвоено в зависимости от пункта, выбранного В СПИ- 


ске. Если выбран пункт White, то переменная $ сет ["сої1ог"] будет иметь значе- 


ние 


1 (значение параметра value). Если выбран пункт Кей, то переменная 


$ G 


ET["color"] будет иметь значение "Red", т. к. параметр value отсутствует. 


Если в списке можно выбрать сразу несколько значений, то в параметре name после 
имени следует указать квадратные скобки (символ массива). Все выбранные значе- 
ния будут помещены в массив. Рассмотрим это на примере (листинг 5.147). 


Ли 


стинг 5.147. Выбор нескольких значений из списка 


<form асііоп="<?=$ ЗЕВУЕВ ['ЅСКІРТ МАМЕ '] ?>"> 


<select папе="дӢауѕ []" size="7" multiple> 
<option уа1џе="1">Понедельник</орііоп> 
<option уа1џе="2">Вторник</орёіоп> 
<option value="3">Cpena</option> 


<op 


tion уа1ае="4">Четверг</орЕ1оп> 


<option уа1ае="5">Пятница</орЕ1о0> 

<option value="6">Cy66orTa</option> 

<option value="7">Bockpecenbe</option> 

</select><br> 

<input type="submit" уа1ае="Отправить"> 

</form> 

<?php 

if (isset($_GET['days']) && is_array($_GET['days'])) { 


echo "Выбранные пункты<фт>\п"; 


foreach ($ СЕТ["Чауз'] аз $item) { 
echo "{$item}<br>\n"; 
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5.18.4. Флажок 


После отправки формы: 


<input type="checkbox" папе-"сһесКкі" уа1ае="1"> Текст 
<input type="checkbox" папе-"сһесКк2"> Текст 


в случае, если флажки установлены, на сервере будут созданы следующие пере- 
менные окружения: 


П метод GET: 


$ G 
$ G 


т "check1"] 
т "сһеск2"] 


Е в 


П метод Рост: 


$_POST ["сһеск1"] 
$_POST ["сһеск2"] 


Если флажки установлены, то переменные будут иметь следующие значения: пере- 
менная $ сЕт["сһеск1"] — 1 (значение параметра value), а переменная 
$ СЕТ ["сһеск2"] — оп (нет параметра value). 


Если флажки не установлены, то переменные не создаются! Поэтому необходимо 
проверять существование переменной: 


ІН 
БЫ 


if (isset($_GET['check1'])) echo $_GET['check1'] . '<br>'; 
if (isset($_GET['check2'])) echo $_GET['check2'] . '<br>'; 


Если флажки объединены в группу, то после имени следует указать квадратные 
скобки. Значение параметра пате у всех флажков должно быть одинаковым, а зна- 
чение параметра value — разным (листинг 5.148). 


Листинг 5.148. Объединение флажков в группу 


<form асііоп="<?=$ ЗЕВУЕВ [' ЅСКІРТ МАМЕ '] ?>"> 


<input type="checkbox" папе-"сһеск|1" уа1ае="1"> Тексті 
<input type="checkbox" папе-"сһеск(1" уа1ае="2"> Текст2 
<input type="checkbox" папе-"сһеск(1" value="3"> Текст3 
<input type="submit" уа]1ае="Отправить"> 

</form> 

<?php 

if (isset($_GET['check']) && is_array($_GET['check'])) { 


echo "Выбранные флажки<рг>'; 
foreach ($ СЕТ|['сһеск'] аз $item) ( 
echo $item . '<br>'; 
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5.18.5. Элемент-переключатель 


После отправки формы, содержащей такой код HTML: 


<input type="radio" паще="зех" value="1" сһескеа> Мужской 


<input type="radio" папе-"зех" уа1ае="2"> Женский 
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в зависимости от метода передачи данных на сервере будут созданы следуюшие 
переменные окружения: 


П метод GET: 


$ СЕТ ["ѕех"] 
П метод Рост: 


$ РОЗТ["зех"] 


Значение переменной $ сі 


5.18.6. Кнопка Submit 


После отправки формы: 


<input type="submit" name="go" уа1ае="Отправить"> 


ET["sex"] зависит OT выбранного переключателя (1 ИЛИ 2). 
Если ни ОДИН ИЗ переключателей не выбран, то переменные не создаются! 


в зависимости от метода передачи данных на сервере будут созданы следуюшие 
переменные окружения: 


С метод GET: 


$ бЕТ["до"] 


П метод POST: 


$_POST["go"] 


Зачем для кнопки указывать параметр name? Все дело в TOM, что в одной форме Mo- 
жет быть несколько кнопок Submit. Кроме того, если наш сценарий обрабатывает 
сразу несколько форм, то это позволит определить, какая форма отправлена. Также 
часто один и тот же сценарий и отображает форму, и обрабатывает ее данные. Если 
форма отправлена, то переменная будет существовать, если не отправлена, то пе- 
ременная создана не будет: 


if (15зе6 ($ СЕТ | "ао" 


])) 


{ 


есһо "Форма отправлена"; 


) 
else { 

// Вывести форму 
} 


Для этой же цели может использоваться скрытое поле: 


<form асііоп="<?=$ 5 


ERVI 


ER [ ' SCRIPT_NAMI 


<input type="text" name="txt"> 


Е"12>"> 
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<input type="hidden" папе-"до" value="send"> 
<input type="submit" уа1ае="Отправить"> 
</form> 


5.18.7. Проверка корректности данных. 
Создание формы регистрации пользователя 


Рассмотрим форму регистрации пользователя с проверкой корректности введенных 
данных, а заодно и обработку данных в кодировке ОТЕ-8 (листинг 5.149). 


Листинг 5.149. Проверка корректности данных 


<?php 
// Файл в кодировке ОТЕ-8 без BOM !!! 
шо internal епсоаіпо ("ОТЕ-8'); // Установка кодировки 
if (isset($_POST['go'"])) { // Если форма отправлена 
// Создаем короткие имена 
$user = $_POST['user'] ?? ''; 
$fam = $_POST['fam'] PO NN 
$age = $_POST['age'] Ээ. 10 


$email = $ РОЗТ['ета11'] ?? ''; 
$раѕѕм1 = $_POST['passw1'] ?? ''; 
Şpassw2 = $ РОЗТ['ра5зм2'] ?? ''; 


// Создаем переменную для описания всех ошибок 


бегг = аггау(); 

// Проверяем корректность введенных данных 

if (mb strlen ($user) > 50 || mb strlen ($user) < 2) { 
$егг[] = 'Недопустимая длина поля Имя"; 

) 

else ( 
if (!preg_match('/^[a-za-aë -]+$/isu', $user)) ( 

$err[] = 'Недопустимые символы B поле Имя"; 


) 

if (mb вегіеп(5Ғаш) > 50 || юр strlen($fam) < 2) { 
$err[] = 'Недопустимая длина поля Фамилия"; 

) 

else { 
if (!ргед таёсһ ('/^[а-га-яё -]+$/isu', 5Ғаш)) ( 


$err[] = 'Недопустимые символы в поле Фамилия"; 


} 

Ѕаде = intval($age, 10); 

if (баде < 3 || Заде > 120) { 
$err[] = 'Неверный возраст"; 
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$pattern = '/^([а-20-9_.-]+)@ 
if (mb strlen ($email) > 50 || !preg_match ($pattern, Зеша11)) { 


$err[] = "Неверный адрес | 


if (!ргед таёсһ ('/^[а-20-9 .-]{6,16}%/150џ', $раз5м1)) { 


Ѕегг[] = "Неверный пароль"; 
) 
else ( 
if ($раз$м1 !== $passw2) 1 
$err[] = 'Пароли должны совпадать'; 


} 


// Если ошибок нет, то массив $err будет пустой 


if (count ($err) == 0) { 
// Добавляем данные в базу данных 
// и отправляем подтверждение на E-mail 


// Делаем авторедирект, чтобы очистить данные формы 


header ('Location: http://localhost! . 
$_SERVER [' SCRIPT_NAME ' ] . '?гед=ок'); 
ехік(); // Завершаем работу скрипта 


} 

else { // Если возникли ошибки 

// Заменяем все спецсимволы на НТМІ-эквиваленты 

Şuser = htmlspecialchars ($user, ЕМТ СОМРАТ | ЕМТ НТМІ5, 'ОТЕ-8'); 
$Еаш = Һіешізресіаісһагв(5Ғаш, ЕМТ СОМРАТ | ЕМТ НТМІ5, 'ОТЕ-8'); 


Заде = Һішізресіаісһагв ($аде, ЕМТ СОМРАТ | ЕМТ НТМІ5, 'ОТЕ-8'); 


$email = htmlspecialchars ($email, ENT COMPAT ЕМТ НТМІ5, 'ОТЕ-8'); 


} 
е1ѕе { // Если форма не отправлена 
$user $fam = бай $email = ''; 


} 

header ('Content-Type: text/html; charset=utf-8'); 

?> 

<!DOCTYPE html> 

<html lang="ru"> 

<head> 
<meta charset="utf-8"> 
<Е1Е1е>Регистрация noJbsoBaTeJa</title> 

</head> 

<body> 

<Һ2>Регистрация пользователя</ћ2> 

<?php 

if (isset($err) && count ($err) > 0) { 


echo '<div style="color: хе4">При заполнении формы были"; 
echo ' допущены ошибки:<рг><рг>'; 
echo implode ("<br>\n", $err), "<br><br></div>\n"; 
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if (isset ($ СЕТ ['гед']) && 5 СЕТ ['кед'] == 'ок') { 
// Если регистрация прошла успешно, выводим подтверждение 
echo '<а1у style="color:green">!'; 
echo '<5>Регистрация прошла успешно</р><рг><рг></аіу>!'; 


} 

?> 

<form action="<?=$_SERVER[ "5СКІРТ МАМЕ"1|?>" method="POST"> 
<div> 

Имя: <br> 

<input type="text" name="user" value="<?=$user ?? ''?>"><br> 


Фамилия: <рг> 
<input type="text" name="fam" value="<?=$fam ?? ''?>"><br> 
Bospacrt:<br> 


<input type="text" name="age" value="<?=$age ?? ''?>"><br> 
E-mail:<br> 
<input type="text" name="email" value="<?=$email ?? ''?>"><br> 


ароль:<рг> 
<input type="password" name="passw1l"><br> 


овторите napoJib :<br> 

<input type="password" name="passw2"> 
<br><br> 
<input type="submit" name="go" value="OTNpaBnTE"> 
</div> 

</form> 

</body> 

</html> 


Как видно из примера, все имена полей, заданные C помошью параметра name, ДОС- 
тупны через переменную окружения $_POST. Если форма отправлена (переменная 
$_POST['go'] будет существовать), то создаем короткие имена переменных. Может 
возникнуть вопрос, почему просто не присвоить значения напрямую: 


$user = $ РОЗТ['а5ег']; 


Все дело в том, что если переменная $ POST['user'] не будет определена, то при 
включенном режиме вывода всех ошибок интерпретатор выдаст предупреждающее 
сообщение: 


Notice: Undefined index: user 


Избежать появления таких сообшений можно, выключив вывод предупреждаюших 
сообщений, например, с помощью функции error reporting (): 


error reporting(E АШ. & ~E МОТТСЕ); 


Однако лучше предварительно проверить существование переменной и присвоить 
ей значение по умолчанию. если она не существует: 


$user = $_POST['user'] ?? ''; 


Чтобы сохранить описания всех ошибок, сделанных пользователем при вводе, мы 
определяем переменную $err и присваиваем ей пустой массив. Затем проверяем 
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корректность введенных данных. С помощью функции mb вегІеп() контролируем 
длину строк, а с помощью регулярных выражений и функции preg match() прове- 
ряем соответствие E-mail шаблону. Если во время проверки возникли ошибки, то 
добавляем их в массив Serr. 


Если ошибок нет (массив $err останется пустым), добавляем данные в базу и отсы- 
лаем подтверждение на E-mail. 
Далее делаем авторедирект и завершаем работу скрипта: 
header ('Location: http://localhost' 
$_SERVER['SCRIPT_NAME'] . '?reg=ok'); 
exit (); 


Зачем нужен авторедирект? После отправки данных они сохраняются B кэше Web- 
браузера, и если нажать кнопку Обновить на панели инструментов Web-6paysepa, 
то данные будут повторно отправлены серверу. А после авторедиректа нажатие 
кнопки Обновить не будет приводить к повторной отправке данных формы. 


Если при проверке были выявлены ошибки, то необходимо заново отобразить фор- 
му, вывести сообщения об ошибках и заполнить все поля для редактирования. Так 
как данные могут содержать специальные символы, мы с помощью функции 
htmlspecialchars () заменяем их на НТМГ-эквиваленты. После этого можно без 
опаски заполнить все поля, подставив значения в параметр value. 


Если форма не была отправлена, то присваиваем переменным пустую строку и вы- 
водим форму. В этом случае параметр value в элементах формы будет равен пустой 
строке. 


Чтобы документ был правильно обработан \МеБ-браузером, желательно с помощью 
функции header () указать МІМЕ-тип и кодировку документа: 


header ('Content-Type: text/html; charset=utf-8'); 


Часто Ha хостингах встречается ситуация, когда сервер настроен на кодировку 
windows-1251. В этом случае сервер автоматически отправит заголовок: 


Content-Type: text/html; charset=windows-1251 


Учитывая, что мы работаем с кодировкой UTF-8, Web-6pay3ep может неправильно 
распознать кодировку, и русские буквы будут искажены. По этой причине реко- 
мендуем всегда явно указывать кодировку, посылая соответствуюший заголовок 
с помощью функции header (). 


Еще раз напомним: поскольку функция һеадег() устанавливает заголовки ответа 
сервера, которые посылаются до отсылки основного содержимого документа, то 
перед функцией не должно быть никаких операторов вывода. Даже пустая строка 
перед открывающим РНР-дескриптором (<?php) вызовет ошибку. Пустые строки 
внутри РНР-дескрипторов ошибку не генерируют, поскольку вывод информации 
осуществляется только с помощью операторов вывода. Кроме того, при использо- 
вании кодировки ОТЕ-8 файл должен быть сохранен в кодировке ОТЕ-8 без ВОМ, 
иначе метка порядка байтов станет причиной ошибки. 
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5.19. Аутентификация с помошью РНР 


В разд 4.4.14 мы уже рассматривали аутентификацию посетителей при помощи 
файла конфигурации сервера Apache .Массеѕѕ. В РНР существует свой способ 
аутентификации посетителей на основе механизма сессий. 


5.19.1. Директивы для управления механизмом сессий 


За механизм сессий в файле php.ini отвечают следующие основные директивы: 

O session. save_handler — определяет способ хранения данных сеанса: 
session.save_handler=files 

O session. save_path -- задает путь к месту хранения данных сеанса: 
зезз1оп.зауе раїћ="С: /хатрр/ётр" 


п зез51оп.изе соокіеѕ — включает возможность использования cookies для меха- 
низма сессий. Если указано значение 1, то использование разрешено, если 0 — 
то запрещено: 


зез51оп.изе соокіеѕ=1 
О session.name — определяет имя сеанса: 


зеззіоп.пате-РНР5Е55Ір 


O session. auto _ start — задает возможность автоматического запуска механизма 
работы с сеансами. Значение 0 запрещает запуск: 


session.auto _start=0 


O session. cookie_path — определяет путь для установки B cookies сеанса: 


везвіоп.сооКіе раіћ=/ 


O session. cache _ expire -- устанавливает время жизни для кэшированных страниц 
сеанса в минутах: 
ѕеѕѕіоп.сасһе ехр1ге=180 

O session. cookie _ lifetime -- определяет время жизни cookies на машине поль- 


зователя. Значение 0 указывает на то, что сооКіев будет удалено сразу после 
закрытия окна УУер-браузера: 


session.cookie_lifetime=0 


С session.use trans sid — задает возможность присоединения PHPSESSID K URL- 
адресам. Если указано значение 1, то использование разрешено, если 0-- TO 
запрешено: 


session.use_trans_sid=0 


О session.use_only cookies — если указано значение 1, то идентификатор сессии 
будет сохраняться только в сооКіев: 


зез51оп.изе опіу соокіеѕ=1 


Основы РНР. Создаем динамические И/еЬ-страницы 731 


5.19.2. Функции для управления сессиями 


Работа с механизмом сессий осуществляется следующим образом: 
1. Запускается сеанс. 

2. Регистрируются переменные сеанса. 

3. Используются переменные сеанса. 

4. Удаляются переменные сеанса. 

5. Сеанс завершается. 

Запустить сессию позволяет функция session загі ([<Опции>]): 
session_start (); 

Если запустить сессию удалось, функция возвращает true. 


При запуске сессии на компьютер пользователя устанавливается Cookies с именем 
PHPSESSID И значением вида rbgvdgk9g7sk9hee4cqndm0561. А в каталоге С/\хатрр\тр 
создается временный файл сессии с именем sess rbgvdgk9g7sk9hee4cqndm0561. 
Дополнительно отправляются заголовки, запрещающие кэширование страницы. 


Если прием cookies отключен в настройках \еБ-браузера, то (при условии, что 
директива session.use_trans_sid имеет значение 1 и директива ѕеѕѕіоп.оѕе оп1Ту_ 
cookies имеет значение 0) к любой ссылке будет добавлена следующая строка: 


?PHPSESSID=rbgvdgk9g7sk9hee4cqndm0561 


Если на етранице имеется форма, то внутрь будет автоматически добавлено екры- 
тое поле: 


<input type="hidden" паце="РНРЗЕ$З ТО" 
value="rbgvdgk9g7sk9hee4cqndm0561" /> 


При первом запуске будут установлены сооКез, а имя сессии будет добавлено 
в ОВГ-адреса для всех внутренних ссылок. Если cookies разрешено использовать, 
то в дальнейшем добавление к URL будет прекращено. 


Включить автоматическое добавление идентификатора сессии к ОВГ-адресам 
можно в конфигурационном файле php.ini или внутри программы с помощью пара- 
метра <Опции> функции session start (): 


session start (['use_trans_sid' => 1, 'use_only соокіеѕ' => 01); 


ВНИМАНИЕ! 
Названия директив указываются без префикса session. 


Идентификатор сессии в этом случае будет доступен через константу SID: 
echo SID; // PHPSESSID=rbgvdgk9g7sk9hee4cqndm0561 


Если удалось записать идентификатор сессии B cookies, то константа SID будет 
содержать пустую строку. 


Получить идентификатор сессии можно с помощью функции session іа(): 


echo session іа(); // rbgvdgk9g7sk9hee4cqndm0561 
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Следует учитывать, что идентификатор сессии, прикрепленный к ОВГ-адресу, 
пользователи могут опубликовать на других страницах в Интернете, что приведет 
к перехвату сессии другим пользователем. Поэтому лучше использовать только 
cookies или предусматривать дополнительную защиту от перехвата сессии, напри- 
мер, проверяя сигнатуру У/еВ-браузера или ІР-адрес пользователя. 


Поменять имя сеанса можно с ПОМОЩЬЮ функции session папе (): 


session пате ("Ivan"); 
session_start (); 


Теперь вместо имени PHPSESSID будет использоваться имя Ivan. Если параметр не 
указан, то функция вернет используемое имя, в противном случае — старое имя. 


Зарегистрировать переменную внутри сеанса можно следующим образом: 


$_SESSION["var1"] = 1; 


Переменная сохраняется не в cookies пользователя, а в специальном файле на cep- 
вере. В cookies пользователя сохраняется только переменная с именем PHPSESSID 
и значением вида rogvdgk9g7sk9hee4cqndm0561. 


Проверить существование переменной можно с помощью оператора isset (): 


if (isset ($_SESSION["var1"] )) { 
echo "Переменная зарегистрирована"; 


) 


Удалить переменную сеанса позволяет оператор unset (): 


unset ($_SESSION["var1"]); 


Удалить сразу все переменные сеанса позволяет функция session unset (): 


session start (); // Запускаем сессию 


session unset () // Удаляем все переменны 


session Ӣеѕігоу(); // Удаляем идентификатор 


Завершая сеанс, сначала нужно удалить все переменные сеанса, а затем вызвать 
функцию session аезекоу() для удаления идентификатора. 


После запуска сессии файл, в который записываются переменные сессии, блокиру- 
ется и становится недоступен до завершения работы скрипта. Если выполняется 
много запросов, то это может стать проблемой. Чтобы избежать блокировки на 
длительное время, нужно воспользоваться следующими способами: 


С вызвать функцию session write с1озе() после окончания изменения перемен- 
ных сеанса. Помните, что после вызова этой функции измененные значения 
переменных сеанса не будут записаны в файл; 


О если мы только читаем данные из файла и не изменяем значения переменных 
сеанса, то в параметре <опции> функции session start () можно указать опцию 
read and close: 


session start (['геаа апа close' => true]); 
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5.19.3. Создание Личного кабинета 


Для примера создадим в каталоге C:\xampp\htdocs каталог cabinet и в нем разместим 
следующие файлы: 


С index.php — содержит форму для ввода логина и пароля (листинг 5.150); 


O cabinet.php — файл с информацией только для прошедших аутентификацию 
пользователей (листинг 5.151); 


С ехі.рһр — для завершения сеанса (листинг 5.152). 


Кроме того, в каталоге C:\xampp\php\includes разместим файл data.inc — для хранения 
логина и пароля (листинг 5.153). 


Листинг 5.150. Содержимое файла C:\xampp\htdocs\cabinet\index.php 


<?php 
require_once ('data.inc'); 
$err = ''; 
if (isset($_POST['login']) && isset($_POST['passw'])) { 
$ РОЅТ['раѕѕм'] = md5($_POST['passw']); 
if ($_POST['login'] === $enter login && 
$_POST['passw'] === ҙ$епёег passw) { 
session_start (); 
5 5Е55ІОМ "ѕеѕѕ 1одіп"І = $ РОЅТ['1одіп']; 
$ ЅЕЅЅІОМ['ѕеѕѕ раѕѕм'] = $ РОЅТ ['раѕѕи']; 
header ('Location: Һібр: / /Іоса1Һћоѕі/саріпеі/саріпеё.рһр!'); 
exit (); 
) 
else ( 
Ѕегг = '<div style="color: геа"><р>'; 
Зегг .- "Логин или пароль введены неправильно!"; 
бегг .= "</р></дім>"; 
) 
} 
?> 


<ҺІ>Вход в систему</һ1> 

<form асііоп="іпаех.рһр" method="POST"> 
<div> 

<р>Логин:</р><рг> 

<input type="text" пате="1одіп"><рг> 
<р>Пароль:</р><рг> 

<input type="password" пате="раѕѕи"><рг> 


<input type="submit" value="Boňtn"> 
</div> 

</form> 

<?php echo $err; ?> 
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Листинг 5.151. Содержимое файла C:\xampp\htdocs\cabinet\cabinet.php 


<?php 

session_start (); 

require_once ('data.inc'); 

if (isset($_SESSION['sess_login']) && isset($_SESSION['sess_passw'])) { 


if ($_SESSION['sess_login'] === $enter login && 
$_SESSION['sess_passw'] === $enter passw) { 
echo "Информация для прошедших аутентификацию<рг><рг>\п"; 
echo "Имя сессии: ' . session папе() . "<5г>\п"; 
echo "Идентификатор сессии: ' . session іа() . "<br>\n"; 


echo "<a ҺгеЁ=\"ехіё.рһр\">Выйти из системы</а>\п"; 


} 


else { 
header ('Location: http://localhost/cabinet/'!); 
exit (); 
} 
} 
else { 
header ('Location: http://localhost/cabinet/'); 
exit (); 


Листинг 5.152. Содержимое файла C:\xamppihtdocs\cabinet\exit.php 


<?php 

session_start (); 

session unset(); // Удаляем все переменны 
setcookie (session пате (), '', 0, '/'); 

session Ӣеѕігоу(); // Удаляем идентификатор 
header ("Location: http://localhost/cabinet/"); 
exit(); 


Листинг 5.153. Содержимое файла C:\xampp\php\includes\data.inc 


<?php 
$enter_ login 


"Іодіп"; 
"202ср962ас5907509646071524234070"; 


$enter passw 


В нашем примере только один логин (login) и один пароль (123). B реальной прак- 
тике для каждого пользователя создаются свои логин и пароль. Учетные записи 
хранятся в файле или, чаше всего, в базе данных. Если используется обычный файл 
(как в нашем случае), то он должен содержать пароль в зашифрованном виде, а сам 
файл должен быть недоступен через Интернет. Поэтому в рассматриваемом при- 
мере файл data.inc должен быть расположен в каталоге C:\xampp\php\includes, а не 
в C:\xampp\htdocs\cabinet. 
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ВНИМАНИЕ! 


Так как мы устанавливаем заголовки ответа сервера, то перед функцией session вғагЕ() 
не должно быть никаких операторов вывода. Даже пустая строка перед открывающим 
РНР-дескриптором (<?php) вызовет ошибку. Кроме того, при использовании кодировки 
UTF-8 файл должен быть сохранен в кодировке ОТҒ-8 без BOM, иначе метка порядка 
байтов станет причиной ошибки. 


5.20. Работа с графикой 


Для работы с графикой предназначена библиотека СР. Чтобы использовать биб- 
лиотеку GD, нужно, чтобы в файле php.ini не было символа комментария (;) перед 
строкой: 


extension=php 992.911 
ВРНР 7.2 строка выглядит следующим образом: 


extension=gd2 


5.20.1. Получение информации о библиотеке GD 


Получить информацию о библиотеке GD в виде ассоциативного массива позволяет 
функция gd іпҒо(): 

<?php 

біпіЕо = gd _info(); 

foreach ($info as $key => $value) { 


if ($value === true) { 
$value = "Да"; 

} 

elseif ($value === false) { 
$value = "Нет"; 

| 

echo "(5Ккеу): {$value}<br>\n"; 


} 


Результат в окне УУер-браузера: 


СР Version: bundled (2.1.0 compatible) 
FreeType Support: Да 
FreeType Linkage: with freetype 
GIF Read Support: Да 
GIF Create Support: Д 
JPEG Support: Да 
PNG Support: Да 
WBMP Support: Да 
XPM Support: Да 
XBM Support: Да 
WebP Support: Да 
BMP Support: Да 
JIS-mapped Japanese Font Support: Нет 


w 
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Как видно из результата, библиотека GD позволяет работать со следующими 
основными форматами изображений: 


O JPEG (Joint Photographic Experts Group) — этот формат подходит для вставки на 
УУеВ-страницу фотографий, но из-за артефактов сжатия не подходит для работы 
с графикой. Прозрачность и анимация не поддерживаются; 

П GIF (Graphics Interchange Format) — палитра ограничена 256 цветами. Поддер- 
живает прозрачность и анимацию. Отлично подходит для создания рекламных 
баннеров; 

O PNG (Portable Network Graphics) — поддерживает палитровые и полноцветные 
изображения, а также прозрачность. При сохранении использует сжатие без 
потерь, поэтому отлично подходит для работы с графикой, но фотографии, со- 
храненные в этом формате, имеют большой размер файла. Следует учитывать, 
что некоторые \еБ-браузеры могут не поддерживать прозрачность при исполь- 
зовании этого формата. 


5.20.2. Загрузка изображения из файла 


Для загрузки изображения из файла предусмотрены следующие функции: 
П imagecreatefromjpeg (<Имя файла>) — для изображений в формате JPEG; 
С imagecreatefromgif (<Имя файла>) — для изображений в формате GIF; 

С imagecreatefrompng (<Имя файла>) — для изображений в формате PNG. 


Если изображение успешно загружено, то функции возвращают идентификатор 
ресурса, в противном случае — значение false: 


@5$1та = imagecreatefromjpeg ('C:\\xampp\\htdocs\\photo.jpg'); 
if ( із геѕоџгсе ($419) ) { 

echo "Изображение успешно загружено’; 

echo gettype ($1149); // resource 


5.20.3. Создание нового изображения 


Функция imagecreatetruecolor () позволяет создать новое полноцветное изображе- 
ние. Если операция успешно выполнена, то функция вернет идентификатор ресур- 
са, в противном случае — значение false. Формат функции: 


<Идентификатор> = іпадесгеаіеігиесо1ог (<Ширина>, <Высота>); 


Пример: 


@5ітд = imagecreatetruecolor (468, 60); 


if ( із гезоцксе ($419) ) { 
echo "Изображение успешно создано"; 


) 
Создать изображение с палитрой цветов можно с помощью функции іпадесхеағе(): 


<Идентификатор> = imagecreate (<Ширина>, <Высота>); 
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Вместо этой функции для создания изображения рекомендуется использовать 
функцию imagecreatetruecolor (), а затем в случае необходимости выполнять пре- 
образование полноцветного изображения в палитровое с помощью функции 
imagetruecolortopalette(): 


imagetruecolortopalette (resource $image, bool $dither, int $ncolors) : bool 


Параметр $dither указывает, нужно ли использовать сглаживание, а параметр 
$ncolors задает максимальное число цветов в палитре. 


Проверить тип изображения позволяет функция ішадеізеспесо1ос(). Функция воз- 
вращает значение true, если изображение является полноцветным, и Еа1зе — 
в противном случае: 


@$img = imagecreatetruecolor (468, 60); 


if ( із геѕоџгсе ($419) ) { 
var dump (imageistruecolor ($img)); // bool (true) 
imagetruecolortopalette ($1та, false, 255); 


var dump (imageistruecolor ($img)); // bool (false) 
} 


Динамическое создание изображений не имело бы смысла при отсутствии возмож- 
ности формировать их содержимое. Библиотека GD предоставляет множество 
функций для изменения созданных или загруженных изображений, которые мы 
рассмотрим в следующих разделах. 


5.20.4. Вывод изображения в \ММер-браузер 


Чтобы вывести изображение в У/ер-браузер, нужно вначале сформировать соответ- 
ствующий заголовок с помощью функции header (): 


header ('Content-Type: іпаде/3реа"); 
header ('Content-Type: image/gif'); 


header ('Content-Type: image/png'); 
а затем вывести изображение с помошью соответствуюшей формату функции: 
O ітадсеҙред() — для изображений в формате JPEG: 

imagejpeg (<Идентификатор>[, <Имя файла>[, <Сжатие>]]) : bool 


В параметре <Сжатие> указывается число от 0 (низкое качество, маленький раз- 
мер файла) до 100 (высокое качество, но большой размер файла). Значение по 
умолчанию — 75; 


O imagegif() — для изображений в формате GIF: 
imagegif (<Идентификатор>[, <Имя файла>]) : bool 
O imagepng() — для изображений в формате РМО: 


ітадерпо (<Идентификатор>[, <Имя файла>[, <Сжатие>[, <Фильтры>111) : bool 
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В параметре <сжатие> указывается число от 0 (без сжатия, большой размер фай- 
ла) до 9 (максимальное сжатие). Значение по умолчанию — 6. В параметре 
<Фильтры> можно указать следующие константы 


PNG NO FILTER (выключение всех фильтров), PNG AL 
фильтров), PNG FILTER AVG, PNG FILTER NONE, PNG FILI 


РМС _ FILTER ОР. 


(или их комбинацию): 


‚ FILTERS (включение всех 


о 


ЕК РА 


ETH, РМС FILTER SUB И 


После вывода изображения следует освободить ресурсы с помошью функции 


imagedestroy (): 


ішадедйезегоу(<Идентификатор>) 


В качестве примера выведем баннер banner.gif в окно \/еБ-браузера. Для этого соз- 


дадим файл banner.php (листинг 5.154). 


Листинг 5.154. Файл Баппег.рһр для вывода баннера 


<?php 
// Загружаем баннер из файла 
85іпа = imagecreatefromgif ('banner.gif'); 
if ( !is_resource($img) ) { 
// Создаем заглушку, если не удалось загрузить 
85іпа = ішадесгеабе (468, 60); 
$white = imagecolorallocate ($img, 255, 255, 255); 
} 
// Удаляем заголовок Х-Ромегеа-Ву 
header гешочуе("Х-Ромегеа-Ву"); 
// Отправляем заголовок 
header ('Content-Type: image/gif'); 


// Выводим изображение в Мер-браузер 
imagegif ($img); 

// Освобождаем ресурсы 

imagedestroy (5ітд); 

ехії (); 


Отобразить баннер в окне УУер-браузера позволяет следующий НТМІ -код: 


<img ѕгс="раппег.рһр" alt=""> 


Это аналогично встраиванию обычного изображения: 


<img src="banner.gif" alt=""> 


Но есть одно различие: если изображение содержит анимацию, то в окне Web- 


браузера будет отображен только первый ее кадр. 


5.20.5. Сохранение изображения в файл 


В функциях іпадезреа(), imagegif () И ішадерпа () необязательный параметр <Имя 
файла> задает имя файла или идентификатор потока, в который осушествляется 
вывод. Это означает, что изображение можно не только вывести в У/ер-браузер, 
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но и сохранить в файл. Причем, мы можем выводить или сохранять созданное или 
загруженное изображение в любом формате, указав соответствующую функцию 
при выводе. 

В качестве примера загрузим изображение в формате JPEG, а затем сохраним его 
в формате PNG (листинг 5.155). Обратите внимание: если файл существует, то он 
будет перезаписан. Если не удалось записать в файл, то функции не только вернут 
значение false, но и выведут предупреждающее сообщение. 


Листинг 5.155. Сохранение изображения в файл 


<?php 
85іпа = imagecreatefromjpeg ('photo.jpg'); 
if ( із _ resource ($img) ) { 
if (@ітадерпа ($9, 'photo_png.png', 3)) { 
echo "Изображение успешно сохранено"; 


} 


else echo "Не удалось сохранить изображение"; 
imagedestroy (5ітд); 
} 


else echo "Не удалось загрузить изображение"; 


5.20.6. Получение информации об изображении 


Получить информацию об изображении позволяют следуюшие функции: 


П getimagesize («Имя файла>[, array &$imageinfo]) — возвращает информацию об 
изображении в виде массива: 


print_r (getimagesize ('photo.jpg')); 
Результат в исходном НТМГ-коде: 


Аггау 
( 


3] => width="500" height="333" 
bits] => 8 

channels] => 3 

mime] => image/jpeg 


) 


Элемент с индексом 2 содержит тип изображения в виде значения одной из кон- 
стант ІМАСЕТҮРЕ <Формат>. Выведем значения основных констант: 


var dump (ТМАСЕТУРЕ GIF); // іпе(1) 
var dump (ТМАСЕТУРЕ JPEG); // іпе(2) 
var dump (ТМАСЕТУРЕ РМС); // 10% (3) 
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var dump (ІМАСЕТҮРЕ PSD); // іпё (5) 
мас _ dump (ІМАСЕТҮРЕ ВМР); // іпе(6) 
var dump (ІМАСЕТҮРЕ ICO); // іпе(17) 


С image type to mime type() — возвращает МІМЕ-тип, соответствующий KOH- 
станте ІМАСЕТҮРЕ <Формат>: 


var dump (ітаде суре (о mime Еуре(ІМАСЕТҮРЕ СІЕ)); 


// string(9) "image/gif" 


var dump (image_type_to mime Суре (ІМАСЕТҮРЕ JPEG) ); 
// string(10) "image/jpeg" 
var dump (image_type_to_ mime Куре (ІМАСЕТҮРЕ PNG) ); 


// string(9) "image/png" 


С image type to extension () — возвращает расширение файла, соответствующего 
константе ІМАСЕТҮРЕ <Формат>: 


var dump (ітаде сүре со ехіепѕіоп (ІМАСЕТҮРЕ СІЕ)); 
// string(4) "дін" 


хаг dump (1таде суре іо ехіепѕіоп (ІМАСЕТҮРЕ ЈРЕС)); 
// ѕЕгіпд (5) ".јред" 

var dump (ітаде сүре со ехіепѕіоп (ТМАСЕТУРЕ РМС)); 
// string(4) ".рпа" 
var dump (1таде суре ео ехіепѕіоп (ІМАСЕТҮРЕ РМС, false)); 
// вегіпа4 (3) "рпа" 


П ітадезх(<Идентификатор>) — возвращает ширину загруженного или созданного 
изображения; 

П :тадезу(<Идентификатор>) — возвращает высоту загруженного или созданного 
изображения: 


85іпа = imagecreatefromjpeg ('photo.jpg'); 
// @$1та = imagecreatetruecolor (500, 333); 
if ( із _ resource ($119) ) { 


echo "Ширина: ' . ішадезх(біпа) . ' '; 
echo "Высота: ' . ішадезу(біпа); 
imagedestroy (5ітд); 

} // Выведет: Ширина: 500 Высота: 333 


5.20.7. Библиотека рһр ехі? 


Получить детальную информацию о JPEG- и ТІЕЕ-изображениях позволяет биб- 
лиотека рһр ехі-І. Чтобы использовать эту библиотеку, нужно, чтобы в файле 
php.ini не было символа комментария (;) перед строкой: 


xtension=php ех1Ё.911 


В РНР 7.2 строка выглядит следующим образом: 


extension=exif 
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ВНИМАНИЕ! 


Библиотека php_exif.dii должна подключаться в конфигурационном файле php.ini после 
библиотеки php_mbstring.dll. Если это условие не соблюдается, то библиотека будет 
недоступна для использования. 


Библиотека рир_ехИ.а! предоставляет следующие функции: 


С exif imagetype (<Путь к файлу>) — позволяет определить формат файла. Функ- 
ция возвращает false, если формат файла определить не удалось, или значение 
одной из констант тМАСЕТУРЕ <Формат>. 


Проверить формат можно так: 


if (Qexif_imagetype ('photo.jpg') == ІМАСЕТҮРЕ JPEG) { 
echo "Это фото в формате JPEG'; 


} 


С exif read даға() — позволяет вывести информацию из заголовков JPEG- и 
ТІЕЕ-файлов. Возвращает результат в виде ассоциативного массива. Формат 
функции: 
ех1Е геаа data (<Путь к файлу>[, <Список разделов>[, 

<Тип массива>[, <Вывод миниатюры>] ]]) 


В параметре <список разделов> можно привести через запятую разделы, которые 
должны присутствовать в файле. Если указанный раздел отсутствует, то функ- 
ция возвращает false. По умолчанию параметр имеет значение null. 


Параметр <Тип массива> определяет, будет ли каждый раздел представлен в виде 
отдельного массива (значение true) или нет (значение false). По умолчанию na- 
раметр имеет значение false. Следует учитывать, что разделы COMPUTED, 
ТНОМВМАТТ, И СОММЕМТ всегда представлены как отдельные массивы. 


Параметр <Вывод миниатюры> определяет, будет ли загружена миниатюра (значе- 
ние true) или нет (значение false). По умолчанию параметр имеет значение 
false. 


Вот пример использования этой функции: 


<?php 
@$arr = exif read даба ('FF5A9519.jpg'); 
if ( !is_array($arr) ) die ("Информации нет"); 


echo '<р>Информация об изображении: </р><рг>'; 
echo "Название: ' . ($arr['FileName'] ?? '') . '<рг>!'; 
echo "Размер: "; 


echo number _ format ($агг['Е11е512е'] ?? '0', 0, '.', 0%); 

echo '<br>'; 

echo "МІМЕ-тип: ' . ($arr['MimeType'] ?? '') . '<xbr>'; 

echo "Ширина: ' . ($arr['COMPUTED'] ['Width'] ?? '') . '<br>'; 
echo "Высота: ' . ($агк['СОМРОТЕР" ] ['Height'] 2? '') . '<br>'; 
echo "Дата создания: ' . ($arr['DateTimeOriginal'] ?? ''); 
echo '<br>'; 

echo "Выдержка: ' . ($arr['ExposureTime'] ?? '') . '<br>'; 
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echo 'Т50: ' . ($arr['ISOSpeedRatings'] ?? '') . '<рг>'"; 
echo '<br>'; 

echo '<5>Информация о þoroannaparTe:</b><br>!'; 

echo "Производитель: ' . ($arr['Make'] ?? '') . '<br>'; 
echo "Модель: ' . ($arr['Model'] ?? '') . '<br>'; 


Выведет примерно: 


Информация об изображении: 
Название: FF5A9519.jpg 

Размер: 2 734 965 

ІМЕ-тип: image/jpeg 

Ширина: 3482 

Высота: 2321 

Дата создания: 2015:03:18 18:59:18 
Выдержка: 1/200 

І50: 400 


Информация о фотоаппарате: 
Производитель: Сапоп 
Модель: Canon EOS 50 Mark ТТТ 


Вывести полную информацию по разделам можно следующим образом: 
print _r(exif_ read data ('FF5A9519.jpg', null, true, Ға1ѕе)); 
С exif thumbnail () -- позволяет вывести миниатюру из JPEG- и ТІЕЕ-файлов. 
Формат функции: 
ех1Е іһопрпаі1 (<Путь к файлу>[, <Ширина>[, <Высота>[, 


<Формат миниатюры>111) : string 


В необязательных параметрах <Ширина>, <Высота> И <Формат миниатюры> МОЖНО 
р > р! p 

указать переменные, в которых будут сохранены соответствующие параметры 

миниатюры: 


<?php 

@$img = exif thumbnail ('FF5A9519.jpg', $w, $h, $type); 

if ( $109 === false ) аіе('Миниатюры нет"); 

header ('Content-Type: ' . image_type_to mime type ($type) ); 
echo $img; 

exit (); 


5.20.8. Работа с цветом 


Для работы с цветом предназначены следующие функции: 


С іпадесо1оха11осағе() — добавляет новый цвет в палитру. Первый созданный 
цвет будет использован для заливки фона палитрового изображения. Формат 
функции: 


imagecolorallocate (<Идентификатор>, <Красный>, <Зеленый>, <Синий>) 


Компоненты цвета формата RGB задаются в виде чисел от 0 до 255. 
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Вот пример создания и вывода баннера белого цвета в формате GIF: 
<?php 

@$img = imagecreate (468, 60); 

$white = imagecolorallocate ($1та, 255, 255, 255); 

header ('Content-Type: image/gif'); 


imagegif ($img); 
imagedestroy (5ітд); 
exit (); 


П imagecolorallocatealpha () — добавляет новый цвет с альфа-каналом в палитру. 
Формат функции: 


imagecolorallocatealpha (<Идентификатор>, <Красный>, <Зеленый>, 
<Синий>, <Альфа-канал>) 


Компоненты цвета формата КОВ задаются в виде чисел от 0 до 255. Значение 
параметра <Альфа-канал> указывается в диапазоне от 0 (полностью непрозрачный 
цвет) до 127 (полностью прозрачный цвет): 


$со1ог = imagecolorallocatealpha ($1та, 0, 0, 0, 64); 


П imagecolorclosest () — возвращает ближайший к указанному цвет из имеющих- 
ся в палитре: 


imagecolorclosest (<Идентификатор>, <Красный>, <Зеленый>, <Синий>) 
Пример: 
$color = imagecolorclosest ($img, 255, 255, 255); 
П ітадесо1оүдеа11осағе() -- уничтожает объект цвета, созданный функциями 
ішадесо1ока11осағе() И imagecolorallocatealpha (). Формат функции: 


ітадесо1Іогаеа11осаїе (<Идентификатор>, <Цвет>) 


п imagecolortransparent () — делает указанный цвет палитры прозрачным: 


ітадесо1огігапзрагепі (<Идентификатор>, <Цвет>) 


Вот пример создания и вывода СІЕ-файла с прозрачным фоном и синим квад- 
ратом: 


<?php 

@$img = imagecreate (468, 60); 

// Задаем цвет фона 

$black = 1тадесо1ога11осаке ($1та, 0, 0, 0); 


// Делаем фон прозрачным 
imagecolortransparent ($лта, $black); 

$blue = imagecolorallocate($img, 0, 0, 255); 
imagefilledrectangle ($1та, 10, 10, 40, 40, $blue); 
header ('Content-Type: image/gif'); 


imagegif ($img); 
imagedestroy ($img) ; 
exit (); 
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С іпадеҒ111() — позволяет закрасить область одного цвета другим цветом. Доста- 
точно указать координаты точки (начало координат расположено в левом верх- 
нем углу изображения) и новый цвет: 


ішадеҒ111 (<Идентификатор>, <Х>, <Ү>, <Цвет>) 
п ішадеҒ111%орокдег() -- позволяет закрасить область, ограниченную точками ка- 


кого-то цвета, другим цветом. Достаточно указать координаты точки, а также 
цвета границы и заливки: 


ішадеҒ111%4орогкдег(<Идентификатор>, <Х>, <Ү>, <Цвет границы>, <Цвет заливки>) 


П imagecolorat() — возвращает индекс цвета указанной точки палитрового изо- 
бражения: 


ішадесо1огағ(<Идентификатор>, <Х>, <Ү>) 
Если изображение является полноцветным, то функция возврашает целочислен- 


ное значение КОВ. Получить значения отдельных компонентов цвета в этом 
случае можно так: 


85біпа = imagecreatefromjpeg ('photo.jpg'); 
$color = imagecolorat ($img, 0, 0); 

$r = ($со1ог >> 16) & ОхЕЕ; 

$g = ($со1ог >> 8) 6 ОхЕЕ; 

$b $color & ОХЕЕ; 

var_dump ($r, $g, $5); 


С imagecolorsforindex() — возвращает ассоциативный массив значений компо- 
нентов цвета для указанного идентификатора цвета или целочисленного значе- 
ния КОВ: 


imagecolorsforindex (<Идентификатор изображения>, <Цвет>) 


В качестве примера выведем числовые значения компонентов цвета указанной 
точки изображения: 


85іпа = imagecreatefromjpeg ('photo.jpg'); 
$color = imagecolorat ($1та, 0, 0); 
print_r (imagecolorsforindex ($19, $со1ог)); 


imagedestroy ($1та) ; 
В результате получим: 


Аггау 


( 
[хеа] => 178 
[green] => 174 
[blue] => 162 
[alpha] => 0 

) 


О imagecolorstotal () — возвращает число цветов в палитре изображения: 


imagecolorstotal (<Идентификатор>) 
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Пример: 


85іпа = imagecreatefromgif ('banner.gif'); 
print_r (imagecolorstotal (біша)); 
imagedestroy ($img) ; 


Создадим полноцветное изображение с прозрачным фоном, нарисуем на нем пря- 
моугольник красного цвета и выведем его в формате PNG (листинг 156). 


Листинг 5.156. Создание изображения с прозрачным фоном 


<?php 
@$img = imagecreatetruecolor (468, 60); 


// Включаем сохранение информации о прозрачности 
imagesavealpha ($img, true); 


// Делаем фон прозрачным 

$ЕгапзрагепЕ = imagecolorallocatealpha ($1та, 0, 0, 0, 127); 
imagefill($img, 0, 0, $Егапзракеп®); 

// Рисуем прямоугольник красного цвета 

$color = іпадесо1ога11осағтеаірһа (біша, 255, 0, 0, 0); 
imagefilledrectangle ($img, 10, 10, 150, 40, $со1ог); 

// Выводим в Мер-браузер 

header ('Content-Type: іпаде/опа"); 


imagepng ($img) ; 
imagedestroy ($img) ; 
exit (); 


Обратите внимание на следующую инструкцию: 


ішадезауеа1рһа ($img, true); 


По умолчанию при сохранении или выводе изображения информация об альфа- 
канале удаляется, в результате чего фон будет черного цвета, а не прозрачным. 
Чтобы этого не происходило при работе с изображениями в формате РМС, содер- 
жащими альфа-канал, нужно обязательно вызвать функцию ітадезауеа1ірһа() и пе- 
редать ей значение true. 


5.20.9. Смешивание цветов 


Если мы рисуем фигуру сплошным цветом без альфа-канала, то новые пикселы 
просто заменят старые. Если же в процессе наложения участвуют цвета с альфа- 
каналом, то возможны варианты. По умолчанию при использовании полноцветных 
изображений цвета будут смешиваться. Изменить поведение по умолчанию позво- 
ляет функция imagealphablending (): 


imagealphablending (<Идентификатор>, <true | false>) 


Рассмотрим работу функции на примере (листинг 5.157). 
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Листинг 5.157. Смешивание цветов 


<?php 
@$img = imagecreatetruecolor (468, 60); 


imagealphablending ($img, true); 

imagesavealpha ($img, true); 

$bg = imagecolorallocatealpha ($img, 255, 255, 255, 20); 
imagefill($img, 0, 0, $bg); 

$color = imagecolorallocatealpha (біша, 255, 0, 0, 50); 
imagefilledrectangle($img, 0, 0, 150, 40, $color); 

print_r (imagecolorsforindex ($img, imagecolorat ($img, 0, 0))); 


imagedestroy ($1та) ; 


В этом примере мы создали полупрозрачный фон и нарисовали прямоугольник по- 
лупрозрачным красным цветом. Если в функции imagealphablending() второй nma- 
раметр имеет значение true или функция вообще не вызвана (при использовании 
полноцветных изображений), то цвета будут взаимодействовать друг с другом, 
и мы получим следующий результат после смешивания: 


// imagealphablending (біпа, true); 
// Array ( [red] => 255 [green] => 90 [blue] => 90 [alpha] => 7 ) 


Если в функции imagealphablending() второй параметр имеет значение false, ТО 
никакого смешивания не произойдет, и новые пикселы просто заменят старые: 


// imagealphablending ($img, false); 
// Array ( [red] => 255 [green] => 0 [blue] => 0 [alpha] => 50 ) 


5.20.10. Рисование линий n фигур 


Библиотека GD позволяет рисовать следующие фигуры: 
С точка: 

ітадеѕеіріхе1 (<Идентификатор>, <Х>, <Ү>, <Цвет>) 

Здесь <х> и <Ү>-- координаты точки относительно левого верхнего угла; 
С сплошная линия: 

imageline (<Идентификатор>, <Х1>, <Ү1>, <Х2>, <Ү2>, <Цвет>) 

Линия задается двумя точками с координатами (<х1>,<Ү1>) и (<х2>,<ү2>); 
O прямоугольник без заливки: 


imagerectangle (<Идентификатор>, <Х1>, <Ү1>, <Х2>, <Ү2>, <Цвет обводки>) 


% <X1> H <Y1> — координаты левого верхнего угла; 
© <X2> и <Ү2>--- координаты правого нижнего угла; 


® <Цвет обводки> — Цвет границы; 
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С прямоугольник с заливкой: 


imagefilledrectangl 


(<Идентификатор>, <X1>, <Ү1>, <X2>, <Y2>, 
<Цвет заливки>) 


% <X1> H <Y1> — координаты левого верхнего угла; 


% <X2> и <Ү2>--- координаты правого нижнего угла; 


Ф <Цвет заливки> -- Цвет прямоугольника; 


O эллипс без заливки: 


іштадее111рзе(<Идентификатор>, <Х>, 


ө <X> H <Y> — координаты центра; 


e < 


І 


ирина> И <Высота> — размеры; 


Ф < 


вет обводки> — Цвет границы; 


ПІ эллипс с заливкой: 


ішадеҒ111ейе111рзе(<Идентификатор>, 


<Ү>, 


Ы 


<Ширина>, <Высота>, 


<Ү>, <Ширина>, 


<Высота>, <Цвет заливки>) 


ө <X> H <Y> — координаты центра; 


e < 


І 


Ф < 


ирина> И <Высота> — размеры; 


вет заливки> -- Цвет эллипса; 


С многоугольник без заливки: 


ішадеро1удоп (<Идентификатор>, 


<Массив координат>, 


<Число вершин>, <Цвет обводки>) 


Ф <Массив координат> — массив координат вершин; 


® <Число вершин> — Число вершин многоугольника; 


® <Цвет обводки> — Цвет границы. 


Пример рисования треугольника: 


Sarr 


= (10, 80, 40, 10, 80, 80]; 


іпадеро1удоп(біша, $arr, 3, $со1ог) 


п многоугольник с заливкой: 


ішадеҒ111ейро1удоп (<Идентификатор>, 


<Число вершин>, 


<Массив координат>, 


<Цвет заливки>) 


Ф <Массив координат> — массив координат вершин; 


Ф <Число вершин> -- Число вершин многоугольника; 


Ф <Цвет заливки> — Цвет многоугольника; 


О дуга: 


ітадеагс (<Идентификатор>, <Х>, <Ү>, 


<Ширина>, <Высота>, 


<Начало>, <Конец>, <Цвет обводки>) 
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<Цвет обводки>) 
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ө <X> H <Y> — координаты центра; 
Ф <Ширина> И <Высота> — размеры; 


e <Начало> — начальный угол в градусах; 


ө 
А 


Конец> — конечный угол в градусах. Угол 0° соответствует положению 3 часа, 
углы отсчитываются по часовой стрелке; 


® <Цвет обводки> — цвет границы. 
Пример рисования дуги: 


<?php 

85іпа = imagecreate (200, 200); 

if (!is_resource ($img)) діе('Ошибка!'); 

$white = imagecolorallocate ($1та, 255, 255, 255); 
$red = imagecolorallocate ($1та, 255, 0, 0); 
imagearc ($img, 100, 100, 150, 150, 0, 270, $red); 
header ('Content-Type: image/gif'); 


imagegif ($img); 
imagedestroy ($img) ; 


O дуга или сектор: 


ішадеҒ111едагс(<Идентификатор>, <Х>, <Ү>, <Ширина>, <Высота>, 
<Начало>, <Конец>, <Цвет>, <Стиль>) 


® <X> H <Y> — координаты центра; 
Ф <Ширина> И <Высота>--- размеры; 
e <Начало>-- начальный угол в градусах; 


e <Конец> — конечный угол в градусах. Угол 0° соответствует положению 
3 часа, углы отсчитываются по часовой стрелке; 


e <Цвет>-- цвет заливки или обводки; 


® <Стиль> — стиль фигуры: 


8 IMG АВС РТЕ — соединяет концы дуги частью окружности. Если дополни- 
тельно указан флаг IMG ARC NOFILL, то рисуется просто дуга. Если флаг 
IMG АВС _NOFILL не указан, то получим сектор с заливкой; 


а IMG АВС CHORD — соединяет концы дуги прямой линией; 


1 ІМС АВС МОРІ, — предписывает использовать характеристики обводки без 
заливки. Заливка используется по умолчанию; 
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8 IMG АВС EDGED — если флаг указан вместе с IMG ARC NOFILL, TO получим 
сектор с обводкой без заливки. 


Нарисуем сектор окружности с заливкой и без заливки, а также дугу: 


<?рһр 
85іпа = imagecreate (200, 200); 
if (115 геѕоџгсе ($іпо)) діе('Ошибка!'); 
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$white = imagecolorallocate ($1та, 255, 255, 255); 

$red = imagecolorallocate ($1та, 255, 0, 0); 
imagefilledarc ($іто, 100, 100, 150, 150, 0, 90, бгеа, 
IMG АВС РТЕ); 

imagefilledarc($img, 100, 100, 150, 150, 180, 270, $red, 
IMG АВС EDGED | ІМС АВС МОЕТ); 
imagefilledarc($img, 100, 100, 150, 150, 290, 340, $red, 
IMG АВС РТЕ | ІМС АВС NOFILL); 

header ('Content-Type: image/gif'); 

imagegif ($img); 


T 


imagedestroy ($19); 


5.20.11. Изменение характеристик линии 


Изменить характеристики линии позволяют следующие функции: 

п ітадеѕеёіћіскпеѕѕ () — устанавливает толщину ЛИНИЙ при рисовании: 
ітадеѕеёіћіскпеѕѕ (<Идентификатор>, <Толщина в пикселах>) 
По умолчанию толщина линий составляет 1 пиксел; 


С imagesetstyle() — задает стиль линии при рисовании, если в качестве параметра 
<Цвет> в функциях для рисования указана константа IMG COLOR STYLED: 


ітадеѕеіѕіу1е (<Идентификатор>, <Массив цветов пикселов>) 
Пример: 


<?рһр 

85іпа = imagecreate (200, 200); 

if (115 геѕоџгсе ($img)) діе('Ошибка!'); 

$white = imagecolorallocate ($1та, 255, 255, 255); 

$black = іпадесо1ога11осағе(5іпта, 0, 0, 0); 

5зіуіе = array ($р1аск, $р1аск, $black, $white, $white, 
$white, $white); 

imagesetstyle($img, 5зіуіе); 

imageline ($img, 20, 100, 180, 100, ІМС COLOR STYLED); 

header ('Content-Type: image/gif'); 


imagegif ($img); 
imagedestroy (5ітд); 


o imagesetbrush () — позволяет задать изображение, которое будет использовано 
в качестве кисти, если в параметре <Цвет> В функциях для рисования указана 
константа IMG СОТОК BRUSHED: 


ітадеѕеіргизћһ (<Идентификатор>, <Идентификатор кисти>) 


Вот пример использования смайлика в качестве кисти: 


@$brush = imagecreatefrompng ('smile.png'); 

if (!is_resource ($brush)) а1е ('Ошибка'); 

imagesetbrush ($img, $brush); 

imageline ($img, 20, 100, 180, 100, ІМС COLOR BRUSHED) ; 
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п іпадеапеіа11ав() — управляет режимом сглаживания линий. Значение true 
включает сглаживание, а значение false — отключает. Формат функции: 


ішадеапеіа11аз (<Идентификатор>, <true | false>) 


Обратите внимание: функция ітадеапііа1іазѕ () работает только с полноцветны- 
МИ изображениями и не поддерживает альфа-канал, а также толщину и стиль 
ЛИНИИ: 


ітадеапііа1іаз ($img, true); 
imageline ($img, 40, 40, 180, 150, $red); 


5.20.12. Вывод текста в изображение 


Для вывода текста используются следующие функции: 

С :тадесъах () — рисует символ на изображении по горизонтали: 
ішадесһаг(<Идентификатор>, <Шрифт>, <Х>, <Ү>, <Символ>, <Цвет>) 

п imagecharup () — рисует символ на изображении по вертикали: 


ітадесһагир (<Идентификатор>, <Шрифт>, <Х>, <Ү>, <Символ>, <Цвет>) 


С іпадевегіпа () — отображает строку на изображении по горизонтали: 


imagestring (<Идентификатор>, <Шрифт>, <Х>, <Ү>, <Строка>, <Цвет>) 


С imagestringup() — отображает строку на изображении по вертикали: 
imagestringup (<Идентификатор>, <Шрифт>, <Х>, <Ү>, <Строка>, <Цвет>) 

В этих функциях параметр <Шрифт> задает размер встроенного шрифта, который 

выражается числом от 1 до 5. 


Все четыре функции с буквами русского языка не работают. Для русского языка 
следует применять ТтиеТуре-шрифты (например, arial.ttf). В Windows шрифты pac- 
положены в каталоге C:\Windows\Fonts. Для работы с ТгиеТуре-шрифтами предна- 
значены следующие функции: 


С imagettftext() — рисует строку на изображении ТгаеТуре-шрифтом. Функция 
возвращает массив координат четырех вершин прямоугольника, в который 
будет вписан текст. Вершины указываются в следующем порядке: нижняя левая, 
нижняя правая, верхняя правая, верхняя левая. Формат функции: 


imagettftext (<Идентификатор>, <Размер>, <Угол>, <Х>, <Ү>, 
<Цвет>, <Шоифт>, <Строка>) 


Параметры имеют следующий смысл: 
e <X> и <ү> — координаты левой крайней точки базовой линии; 
e <Размер> — размер шрифта; 


e <Угол> — угол поворота текста. Угол 0° соответствует обычному горизон- 
тальному расположению текста, а поворот осуществляется против часовой 
стрелки; 


® <Прифт> — имя файла со шрифтом. 
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Выведем текст и обведем его рамкой: 


<?php 

85іпа = imagecreate (400, 100); 

if (!is_resource ($img)) діе('Ошибка!'); 

$white = imagecolorallocate ($img, 255, 255, 255); 
$red = imagecolorallocate ($1та, 255, 0, 0); 

$black = imagecolorallocate($img, 0, 0, 0); 

$font = 'C:\Windows\\Fonts\\arial.ttf'; 

$a = imagettftext ($img, 20, 0, 11, 21, $red, $font, 
"Текст на русском языке"); 
imagerectangle ($img, $а[6], $а[7], $а[2], $а[3], $black); 
header ('Content-Type: image/gif'); 

imagegif ($img); 

imagedestroy (5ітд); 


С imagettfbbox() -- возвращает координаты прямоугольника, в который вписана 
строка с помощью ТгаеТуре-шрифта. Формат функции: 


imagettfbbox (<Размер>, <Угол>, <Шрифт>, <Строка>) 
Например, такой код: 


$font = 'C:\\Windows\\Fonts\\arial.ttf'; 

$arr = imagettfbbox(20, 0, $font, "Текст на русском языке"); 
ргіпе к(багк); 

выведет: 

Array ( [0] => 0 [1] => 5 [2] => 297 [3] => 5 [4] => 297 


Это означает, что заданный текст, выведенный под заданным углом таким 
шрифтом и размером, поместится в прямоугольник со следующими координа- 
тами: 


% 0, 5 — левый нижний угол; 
® 297, 5 — правый нижний угол; 
® 297, -20 — правый верхний угол; 


® 0, -20 — левый верхний угол. 


ВНИМАНИЕ! 


Две координаты по у имеют отрицательные значения. Это происходит потому, что на- 
чалом координат считается левая точка базовой линии. Базовая линия — это линия, 
соприкасающаяся с большинством букв снизу. Части некоторых букв могут быть рас- 
положены ниже базовой линии (например, буква «у»). Все, что расположено ниже 
базовой линии, имеет положительные координаты у, а все, что выше, — отрицатель- 
ные. Кроме того, отрицательные значения может иметь и координата х. 


При выводе текста на готовое изображение возможны проблемы с цветом текста. 
Особенно это характерно для изображений в формате GIF, т. к. количество цветов 
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в палитре ограничено числом 256. Если попытаться добавить новый цвет при мак- 
симальном количестве цветов в палитре, функция imagecolorallocate() вместо 
идентификатора цвета вернет значение false, а цвет текста будет соответствовать 
цвету фона. Один из способов решения этой проблемы заключается в использова- 
нии функции imagecolorclosest (), которая возвращает ближайший цвет, имеющий- 
ся в палитре (листинг 5.158). 


Рис. 5.2. Вывод текста на готовое изображение 


Листинг 5.158. Вывод текста на готовое изображение 


<?php 
85іпа = imagecreatefromgif ('foto.gif'); 
if ( !is_resource($img) ) аіе("Ошибка"); 
header ('Content-Type: image/gif'); 
$white = imagecolorallocate ($img, 255, 255, 255); 
if ($white !== false) { 
$str = "Белый цвет"; 
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еізе { 
$white2 = imagecolorclosest ($img, 255, 255, 255); 
$str = 'Ближайший цвет"; 
} 
$font = 'C:/Windows/Fonts/arial.ttf'; 
imagettftext ($img, 28, 0, 100, 400, $white2, $font, $str); 
$str = 'Точный цвет"; 
imagettftext ($img, 28, 0, 140, 440, $white, $font, $str); 
imagegif ($img); 
imagedestroy ($img) ; 
exit(); 


Здесь мы выводим на изображение две строки. Первая строка выводится цве- 
том, ближайшим к указанному цвету в палитре. Вторая строка демонстрирует 
цвет текста, который получится, если бы мы не использовали функцию 
imagecolorclosest (). Результат выполнения листинга 5.158 изображен на рис. 5.2. 


5.20.13. Создаем счетчик посещений 


В качестве примера создадим счетчик посещения с использованием сооК1ез и выве- 
дем результат в графическом виде (листинг 5.159). 


Листинг 5.159. Счетчик посещений 


<?рһр 

$count = $ СООКІЕ ['раде у1емз'] ?? 0; 

$count++; 

setcookie ("раде уіемѕ', $count, time() + 60 * 60 * 24 * 365); 
header ('Content-Type: image/gif'); 


$img = imagecreate (88, 31); 

$white = imagecolorallocate ($1та, 255, 255, 255); 
$gray = ітадесо1ога11осабе ($1та, 128, 128, 128); 
$black = imagecolorallocate($img, 0, 0, 0); 
imagerectangle ($1та, 0, 0, 87, 30, $black); 

$font = 'C:/Windows/Fonts/arial.ttf'; 

$str = "Мой счетчик"; 

imagettftext ($img, 8, 0, 11, 13, $gray, $font, $str); 
$arr = imagettfbbox (12, 0, $font, $count); 

$1паерЕ = intval((88 - $arr[2]) / 2); 

imagettftext ($img, 12, 0, $indent, 27, $gray, $font, $count); 
imagegif ($img); 


imagedestroy ($img); 
ехі%(); 


Попробуйте обновить страницу -- цифры на счетчике будут увеличиваться. 
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5.20.14. Изменение размеров 
и копирование изображений 


Для изменения размеров и копирования изображений применяется функция 
1тадесорутезатр1еа (). Формат функции: 


ішадесоругезатр1еа (<Идентификатор1>, <Идентификатор2>, <X1>, <Y1>, 
<Х2>, <Ү2>, <Ширина1>, <Высота1>, <Ширина2>, 
<Высота2>) 


Параметр <Идентификатор1> задает изображение, в которое требуется скопировать 
изображение, заданное параметром <Идентификатор2>. Изображение, в которое 
осуществляется копирование, должно быть полноцветным. Для создания под- 
ложки при изменении размеров изображения часто применяется функция 
ітадесгеаіеігиесо1ог (). 


Параметры <х2>, <Ү2>, <Ширина2> и <Высота2> задают прямоугольную область в изо- 
бражении, заданном в параметре <Идентификатор2>, которую мы будем копировать. 
А параметры <х1>, <Ү1>, <Ширина1> И <Высота1> определяют прямоугольную область, 
в которую будет вставлен копируемый фрагмент. 


Вместо функции ітадесоругеѕатр1еі{() можно использовать функцию 
imagecopyresized (), имеющую точно такой же формат, но результат будет хуже. 


В качестве примера уменьшим изображение в два раза и выведем полученное 
изображение в У/еһ-браузер (листинг 5.160). 


Листинг 5.160. Изменение размера изображения 


<?рһр 
85іпа = imagecreatefromjpeg ('photo.jpg'); 
if ( !is_resource($img) ) die ('Ошибка'); 


// Получаем размеры изображения 

$width = imagesx ($19); 

$height = ітадезу ($ітд); 

// Получаем ширину и высоту нового изображения 
$w intval ($width / 2); 

$h intval ($height / 2); 

// Создаем подложку для нового изображения 


85іпа2 = imagecreatetruecolor ($w, $h); 


if (!is_resource ($img2)) die('He удалось создать"); 
// Копируем и изменяем размер 
1падесоругезатр1еа ($1та2, $img, 0, 0, 0, 0, 
$w, $h, $width, $height); 
// Выводим изображение 
header ('Content-Type: image/jpeg'); 
imagejpeg ($img2, null, 100); 


imagedestroy ($1та) ; 
imagedestroy ($1192); 
ехік(); 
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В листинге 5.158 мы рассмотрели проблему вывода текста на готовое изображение 
и не получили точный цвет текста. Теперь реализуем вывод текста указанным 
цветом. Для этого загружаем исходное изображение, создаем подложку такого же 
размера и копируем исходное изображение на созданную подложку. После чего 
выводим надпись нужным цветом (листинг 5.161). 


Листинг 5.161. Вывод текста на готовое изображение указанным цветом 


<?php 

85іпа = imagecreatefromgif('foto.gif'); 

if ( !is_resource($img) ) die ('Ошибка'); 

// Получаем размеры изображения 

$width = ішадезх(5іпа); 

$height = ітадезу ($ітд); 

// Создаем подложку для нового изображения 

85іпа2 = imagecreatetruecolor ($width, $height); 

if (!is_resource ($img2)) die('He удалось создать"); 


// Копируем исходное изображение на подложку 

1падесоругезатр1еа ($192, $img, 0, 0, 0, 0, $width, $height, 
$width, $height); 

imagedestroy ($img); 

$white = imagecolorallocate ($img2, 255, 255, 255); 

if ($white === false) die ('Ошибка'); 

$str = "Фонтан Самсон"; 

$font = 'C:/Windows/Fonts/arial.ttf'; 

// Выводим надпись на изображение 

imagettftext ($img2, 28, 0, 100, 440, $white, $font, $str); 

imagetruecolortopalette ($img2, false, 256); 


// Выводим изображение 


header ('Content-Type: image/gif'); 
imagegif ($1192); 

imagedestroy ($1192); 

exit(); 


Результат выполнения этого скрипта показан на рис. 5.3. 


Функция ітадесорутекде () выполняет копирование фрагмента изображения с нало- 
жением: 


ішадесо где (<Идентификатор1>, <Идентификатор2>, <Х1>, <Ү1>, 
4 pymerg p p 
<X2>, <Ү2>, <Ширина>, <Высота>, <Наложение>) 


Последний параметр указывает степень наложения копируемого фрагмента на 
целевое изображение в виде числа от 0 (без наложения) до 100 (полное наложение 
копируемого фрагмента на целевое изображение). 


Если нужно просто скопировать фрагмент, то можно воспользоваться функцией 
ішадесору(). Однако следует учитывать, что она не поддерживает прозрачность. 
Формат функции: 
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ішадесору (<Идентификаторі>, <Идентификатор2>, <X1>, <Y1>, 

<Х2>, <Ү2>, <Ширина>, <Высота>) 
Изменить масштаб изображения с указанием метода интерполяции позволяет 
функция іпадезса1е(). Формат функции: 


ішадезса1е(<Идентификатор>, int $пем width[, int $пем height=-1[, 
int $mode=IMG _ BILINEAR FIXED]]) : resource 


Во втором параметре указывается новая ширина, а в третьем — новая высота. Если 
вместо высоты указано отрицательное значение или параметр не указан, то значе- 
ние параметра будет рассчитано автоматически с соблюдением пропорций. 
Параметр $mode задает метод интерполяции, который будет использоваться при 
изменении масштаба. Можно указать константы IMG BILINEAR FIXED, IMG ВТСОВТС, 
IMG ВІСОВІС FIXED, IMG NEAREST NEIGHBOUR и др. Функция возвращает новое изобра- 
жение: 


@$1192 = imagescale ($119, 300, -1, IMG BILINEAR FIXED); 


Фонтан 


Рис. 5.3. Вывод текста на готовое изображение определенным цветом 
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5.20.15. Обрезка изображения 


Функция imagecrop () позволяет выполнить обрезку изображения. Формат функции: 


ітадесгор (<Идентификатор>, <Массив>) : resource 


Во втором параметре указывается ассоциативный массив с координатами и разме- 
рами прямоугольной области. Функция возврашает новое изображение. Пример: 


85іпа = imagecreatefromjpeg ('photo.jpg'); 


if ( !is_resource($img) ) die ('Ошибка'); 

@$img2 = ітадесгор ($img, ['х' => 50, 'y' => 50, 
'width' => 100, 'height' => 100]); 

if ( !іѕ геѕоџгсе ($1702) ) діе("Ошибка"); 


header ('Content-Type: image/jpeg'); 
imagejpeg ($img2, null, 100); 


5.20.16. Врашение изображения 


Повернуть изображение на некоторый угол относительно центра позволяет функ- 
ЦИЯ imagerotate (). Формат функции: 


imagerotate (<Идентификатор>, <Угол>, <Цвет фона>) : resource 


Результат работы функции зависит от используемого метода интерполяции, кото- 
рый задается с помощью функции imagesetinterpolation (): 


іпадезесіпбсегро1асіоп(<Идентификатор>і(, <Метод>-ІМС ВТЬЫТМЕАВ ЕІХЕРІ) 


По умолчанию используется билинейная интерполяция. Полный список констант, 
задающих метод интерполяции, смотрите в документации. 


Пример поворота изображения на 45 градусов приведен в листинге 5.162. 


Листинг 5.162. Вращение изображения 


<?php 
85іпа = imagecreatefromjpeg ('photo.jpg'); 


if ( !is_resource($img) ) die ('Ошибка'); 

$transparent = imagecolorallocatealpha ($1та, 0, 0, 0, 127); 
imagesetinterpolation ($9, ІМС BILINEAR FIXED); 

@$img2 = imagerotate ($img, 45, $transparent); 


if ( !is_resource ($1702) ) die ('Ommōka'); 
imagesavealpha ($img2, true); 
header ('Content-Type: image/png'); 


imagepng (5іпа2); 
imagedestroy ($img) ; 
imagedestroy ($1192); 
exit(); 
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5.20.17. Аффинные преобразования 


Функция imageaffine() позволяет выполнить различные трансформации изображе- 
ния (смещение, масштабирование, вращение и сдвиг). Формат функции: 


imageaffine (<Идентификатор>, <Матрица>(, array $с1ір]) : resource 
В параметре <Матрица> указывается массив из шести элементов: 
$matrix = [ mxx, шху, myx, myy, tx, ty 1; 

Матрица трансформации имеет следующий вид: 


mxx mxy tx 


myx myy ty 
Вычисление координат с учетом трансформации производится так: 


x = mxx * x + пху * у + їх 


у = мух * x + myy * y + ty 


Вот пример матрицы трансформации для масштабирования в два раза: 


стактах--- |2, -0; 0ұ-2270, 201; 


Создать матрицу трансформации позволяет функция imageaffinematrixget (). Фор- 
мат функции: 


imageaffinematrixget (<Опция>, <Значение>) : array 


Если B первом параметре задана константа IMG AFFINE TRANSLATE (смешение) или 
IMG AFFINE SCALE (масштаб), то во втором параметре должен быть указан ассоциа- 
тивный массив с ключами x и у: 


Şmatrix = imageaffinematrixget (IMG AFFINE · 

ІХ! => 10, 'y' => 20]); 
print_r ($matrix); 
// Array ( [0] => 1 [1] => 0 [2] => 0 [3] => 1 [4] => 10 [5] => 20) 
Şmatrix = imageaffinematrixget (IMG AFFINE SCALE, 
ІХ! => 2, 'y' => 1.51); 


print_r ($matrix); 
// Аккау ( [0] => 2 [1] => 0 [2] => 0 [3] => 1.5 [4] => 0 [5] => 0) 


Если в первом параметре задана константа IMG AFFINE ВОТАТЕ (вращение), 
IMG АЕЕТМЕ ЗНЕАВ НОВТРОМТАТ (сдвиг по горизонтали) или IMG АЕЕТМЕ SHEAR VERTICAL 
(сдвиг по вертикали), то во втором параметре должно быть указано значение в гра- 
дусах: 


=] 


$matrix = imageaffinematrixget (ІМС AFFINE ROTATE, 45); 
print_r ($matrix); 
// Array ( [0] => 0.70710678118655 [1] => 0.70710678118655 
// [2] => -0.70710678118655 [3] => 0.70710678118655 

// [4] => 0 [5] => 0) 
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С помощью функции imageaffinematrixconcat () можно объединить две матрицы 
трансформации в одну. Формат функции: 


imageaffinematrixconcat (array $11, array 52) : array 


Уменьшим размер изображения в два раза и повернем его на 45 градусов против 
часовой стрелки (листинг 5.163). 


Листинг 5.163. Аффинные преобразования 


<?php 
85іпа = imagecreatefromjpeg ('photo.jpg'); 


if ( !is_resource($img) ) die ('Ошибка'); 
imagesetinterpolation ($9, ІМС BILINEAR FIXED); 
$m1 imageaffinematrixget (ІМС _ AFFINE _ ROTATE, -45); 
$12 = imageaffinematrixget (ІМС AFFINE SCALE, 

['х' => 0.5, 'у' => 0.51); 
$matrix = imageaffinematrixconcat ($11, $02); 


T 


@$img2 = imageaffine ($1та, $matrix); 
if ( !іѕ геѕоџгсе ($1702) ) діе('Ошибка!'); 
ішадезауеа1рһа ($11492, true); 


header ('Content-Type: image/png'); 
imagepng ($1192); 

imagedestroy ($img) ; 

imagedestroy ($1192); 

exit(); 


5.20.18. Применение фильтров 


Функция imagefilter() позволяет применить фильтр к изображению. Формат 
функции: 


imagefilter (<Идентификатор>, <Фильтр>[, int $ага1[, int $arg2[, 
int $arg3[, int $arg4]]]]) : bool 


Размытие изображения 


Размыть или сгладить изображение позволяют следующие фильтры: 


1] 


О IMG FILTER САОЗЗТАМ BLUR — размытие методом Гаусса: 


imagefilter ($19, IMG FILTER GAUSSIAN BLUR); 


О IMG FILTER SELECTIVE BLUR — размывает изображение: 


imagefilter($img, IMG FILTER SELECTIVE BLUR); 


4 


С IMG FILTER SMOOTH — сглаживает изображение. Степень сглаживания задается 
в параметре $arg1: 


imagefilter ($1та, ІМС FILTER 5МООТН, 3); 
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Изменение яркости и контраста 


Изменить яркость или контраст позволяют следующие фильтры: 


С IMG FILTER BRIGHTNESS — изменяет яркость изображения. Уровень яркости зада- 
ется в параметре $arg1 (от -255 до 255): 


imagefilter 


($119, IMG FILTER _ BRIGHTNESS, 10); 


С IMG FILTER CONTRAST — изменяет контраст изображения. Уровень контраста 
задается в параметре $arg1 (от -100 до 100): 


imagefilter 


(біша, IMG FILTER CONTRAST, -10); 


Изменение цвета 


Преобразовать 


нос ПОМОЩЬЮ фильтра ІМС ЕТЬТЕВ GRAYSCALE: 


imagefilter (Ş$img, IMG FILTER СВАУЗСАГЕ 


цветное изображение В изображение в градациях серого цвета мож- 


, 


Для преобразования изображения к оттенкам какого-либо цвета предназначен 
фильтр Імс ЕІШТЕК СОҺОВІ2Е. Значения компонентов цвета КСВ задаются в пара- 


метрах $argl, $arg2 И $arg3 (от 0 до 255), а прозрачность в параметре $arg4 (от 0 


ДО 127): 


imagefilter ($19, IMG FILTER COLORIZE, 255, 0, 0, 50); 


Инвертировать 


значения компонентов цвета позволяет фильтр ІМС FILTER МЕСАТЕ: 


imagefilter ($19, IMG FILTER NEGATE); 


Выделение 


границ 


Фильтр ІМС FILTER ЕРСЕрЕТЕСТ Позволяет выделить границы объектов: 


imagefilter(Ş$img, IMG FILTER ЕРСЕРЕТЕСТ); 


Сделать изображение рельефным можно с помошью фильтра IMG FILTER EMBOSS: 


imagefilter ($img, IMG FILTER 


mp 


1] 


BOSS) ; 


Фильтр IMG FILTER MEAN REMOVAL реализует эффект «эскиза»: 


imagefilter ($19, IMG FILTER MEAN REMOVAL) ; 


Разделение 


изображения на блоки 


Разделить изображение на отдельные одноцветные блоки позволяет фильтр 


ІМС FILTER PIX 


ELATE. Размер блока указывается в параметре $argl, а в параметре 


$arg2 МОЖНО задать значения true ИЛИ false (по умолчанию): 


imagefilter ($19, IMG ЕІІТЕК РІХЕПАТЕ, 5, true); 
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Применение произвольного фильтра 


Применить к изображению фильтр с произвольным ядром свертки размером 3х3 
позволяет функция imageconvolution (). Формат функции: 


1падесопуо а 1 оп (<Идентификатор>, array $matrix, float $div, 
float $offset) : bool 


B первом параметре указывается матрица ядра фильтра в виде многомерного мас- 
сива, во втором — коэффициент нормализации, а в третьем -- смещение цвета. 


Приведем несколько примеров: 


п размытие методом однородного сглаживания: 


5кегпеі = 
[1, 1, 1], 
[1, 1, 1], 
1,1,1 


1падесопуо а 1 оп ($1та, $kernel, 9, 0); 


п увеличение резкости: 


$Кегпе1 = 
[ 0.1111, -0.8889, 0.1111], 
[-0.8889, 4.1111, -0.8889], 
[ 0.1111, -0.8889, 0.1111] 
]; 


1падесопуо а 1 оп ($1та, $kernel, 1, 0); 


С выделение границ: 


5кегпеі = 
E Oy а „201; 
4. А 
о, 1, ] 


imageconvolution ($1та, $kernel, 1, 0); 


5.20.19. Создание зеркального отражения 


Создать зеркальное отражение по горизонтали, вертикали или по горизонтали и по 
вертикали позволяет функция imageflip(): 


imageflip (<Идентификатор>, <Режим>) : bool 
Параметр <Режим> задает направление отражения: 


o ІМС FLIP _ HORIZONTAL — отражение по горизонтали; 


o ІМС FLIP _ VERTICAL — отражение по вертикали; 


o IMG _ FLIP _ BOTH — отражение и по горизонтали, и по вертикали. 
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Пример: 


imageflip($img, IMG FLIP HORIZONTAL); 


5.20.20. Создание скриншота экрана 


Создать скриншот экрана позволяет функция imagegrabscreen(). Функция возвра- 
шает изображение или значение false — в случае неудачи: 

<?рһр 

85іпа = ітадедгарзсгееп (); 

if ( !іѕ геѕоџгсе ($119) ) die ('Ошибка'); 

header ('Content-Type: image/jpeg'); 


imagejpeg ($img, null, 100); 
imagedestroy ($img) ; 
exit (); 


5.21. Другие полезные функции 


В этом разделе мы рассмотрим дополнительные функции, которые могут приго- 
диться при написании скриптов на РНР. 


5.21.1. Выделение фрагментов исходного кода 


С помощью функции highlight ғі1е() можно подсветить синтаксис РНР-кода. 
В качестве параметра нужно передать имя файла с РНР-кодом, и в результате полу- 
чим содержимое файла с выделением синтаксиса в окне У/ер-браузера или в виде 
строки (если второй параметр имеет значение true). Формат функции: 


61901196 Е11е (<Имя файла>[, <true | Ға1ѕе>=Ға1ѕе]) 
Пример: 
highlight_file ('banner.php'); 


5вег = highlight_file ('раппег.рбр', true); 
echo $str; 


Функция highlight_string() позволяет подсветить РНР-код, находящийся в строке. 
В результате получим содержимое строки с выделением синтаксиса в окне Web- 
браузера или в виде строки (если второй параметр имеет значение true). Формат 
функции: 


highlight_string (<Имя файла>[, <true | false>=false]) 
Пример: 


$str = "<?рһр $s = "строка"; ?>'; 
highlight_string ($str); 

Şstr = highlight_string($str, true); 
echo $str; 
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Управлять цветами можно с помощью следующих директив в файле php.ini: 


highlight.string = #000000 
highlight.comment = #FF9900 
highlight.keyword = #007700 
highlight.default = #0000BB 
highlight.html #000000 


5.21.2. Получение информации об интерпретаторе 


Для этого предназначены следующие функции: 


П рһріпғо ([<Раздел>]) — возвращает детальную информацию об интерпретаторе: 
<?рһр 
рһріпёо (); 
О рћруегзіоп ( [<Расширение>]) — служит для определения версии интерпретатора: 
echo рһруегвіоп(); // Выведет: 7.2.0 
Можно также воспользоваться следующими константами: 
var dump (РНР УЕК5ІОМ); // string (5) "7.2.0" 
var dump (РНР УЕБУТОМ 1р); // іпе(70200) 
var dump (РНР МАЗОВ VERSION); // 106 (7) 
var dump (РНР МТМОВ VERSION); // 106 (2) 
var _ dump (РНР ВЕТЕАЗЕ УЕК5ІОМ); // 10% (0) 
var dump (РНР ЕХТВА VERSION); // string(0) "" 
П version compare () — сравнивает две версии. Формат функции: 


version compare (string $versionl, string $version2[, 
string $operator]) : mixed 


Вот пример проверки использования PHP 7: 


var dump (version сотраге (РНР УЕВЗУТОМ, '7.0.0') >= 0); 
// bool (true) 
var dump (version compare (PHP_VERSION, '7.0.0', '>=')); 
// bool (true) 


o getlastmod() — возвращает время последнего изменения сценария: 
echo дабе("а.п.у!", getlastmod()); // Выведет: 06.01.18 
o get_current user () позволяет узнать имя пользователя, являющегося вла- 


дельцем запущенного сценария: 


cho деб соггепі user (); 


5.21.3. Изменение значения директив 
во время выполнения сценария 


С помощью функции ілі ѕеё () можно изменить значение какой-либо директивы из 
файла php.ini Ha время выполнения сценария. Формат функции: 


101 ѕеї (<Директива>, <Новое значение>) 


764 


Гпава 5 


С помощью функции ini че () можно посмотреть текущее значение какой-либо 
директивы. Формат функции: 


101 деф (<Директива>) 


Пример: 


echo ini _ get ('default_charset'); // Выведет: ОТЕ-8 


Функция іпі десе а11() возвращает массив значений всех директив: 


echo '<рге>!; 
print г(іпі дес а11 ( 
echo '</рге>'; 


)); 


Фрагмент результата в окне \еБ-браузера: 


[date.timezone] 
( 


=> Array 


[global_value] => Europe/Moscow 
[local_value] => Europe/Moscow 


[access] 


) 


-> 


7 


[default_charset] => Array 


( 


[global_value] => UTF-8 
[local_value] => ОТЕ-8 


[access] 


-> 


7 


Установить значение директивы с помощью функции ini set() можно не всегда. 
ОПЦИЯ access, возвращаемая функцией ini дее а11(), позволяет определить, MOX- 
но ли изменить значение директивы. Она может принимать следующие значения: 


П 4 — директива может быть изменена в файле php.ini или httpd.conf; 


O 6 — директива может быть изменена в файле php.ini, .Һассеѕѕ или httpd.conf; 


O 7— директива может быть изменена где угодно. 


Посмотреть текушее значение какой-либо директивы и определить, откуда ее мож- 
но изменить, позволяет скрипт, приведенный в листинге 5.164. 


Листинг 5.164. Получение значения директивы 


<form асііоп="<?=$ 5 


ERV. 


ER [ "SCRIPT_NAME" ] ?>"> 


<input type="text" name="name іпі"> 
<input type="submit" уа1ае="Определить"> 


</form> 

<?php 

if (isset ($ СЕ 
$ini = $_GE 


T['name_ini'])) { 
T['name_ini']; 


Ѕагг = ini get_all(); 
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if (!isset($arr[$ini])) { 


exit ('Директива не найдена"); 


} 


echo "Директива <b>' . htmlspecialchars ($101) . '</Б>!; 


echo '<рг>Глобальное значение: "; 

echo htmlspecialchars ($акг [$101] ['global_value']); 

echo '<рг>Локальное значение: "; 

echo htmlspecialchars ($arr[$ini]['local_value']); 

echo "<рг>Изменить можно "; 

switch ($агг [$101] ['ассезз']) { 
case 4: echo "в php.ini или httpd.conf'; break; 
case 6: echo "в php.ini, .htaccess или httpd.conf'; break; 
case 7: echo "где угодно'; break; 


Для изменения директив PHP из файла .htaccess или httpd.conf используются две 
директивы: php value И php flag. Директива php flag служит для установки логиче- 
ских значений директив, а php value — для строковых и числовых значений: 


php уа1ае <Директива> <Значение> 


php Е1ад <Директива> Оп | Off 
Пример: 


php value error_log "php error log" 
php flag log_errors On 


5.21.4. Выполнение команд, содержащихся в строке 


С помощью функции eval () можно выполнить строку как РНР-код (листинг 5.165). 


Листинг 5.165. Выполнение команд, содержащихся в строке 


<?php 

$code =<<<'LABEL' 

for ($i = 1; $i <= 5; $i++) { 
echo "Строка{$1} "; 


} 

LABEL; 

Егу { 
eval ($code); 

} catch (\ParseError $e) { 
echo "Ошибка: $e"; 


} 
Результат выполнения: 
Строка1 Строка2 СтрокаЗ Строка4 Строка5 


Если код содержит синтаксические ошибки, то генерируется исключение 
РагѕеЕггог, которое можно обработать с помощью инструкции try. 
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Основы MySQL. 
Работаем с базами данных 


6.1. Основные понятия 


MySQL — это система управления реляционными базами данных. Сервер MySQL 
позволяет эффективно работать с данными и обеспечивает быстрый доступ к ин- 
формации одновременно нескольким пользователям. При этом доступ к данным 
предоставляется только пользователям, имеющим на это право. 


Что же такое база данных? Реляционная база данных — это совокупность двумер- 
ных таблиц, связанных отношениями друг с другом. Каждая таблица содержит 
совокупность записей. В свою очередь запись — это набор полей, содержащих свя- 
занную информацию. Любое поле в базе данных имеет имя и определенный тип. 
Имя таблицы должно быть уникальным в пределах базы данных. В свою очередь 
имя поля должно быть уникальным в пределах таблицы. 


Для выборки записей из базы данных разработан специализированный язык — SQL 
(Structured Query Language, структурированный язык запросов). С помощью этого 
языка можно создавать базы данных и таблицы, добавлять, изменять и удалять 
данные, получать данные по запросу. Но прежде чем изучать SQL, разберемся 
с тем, как создаются реляционные базы данных. 


6.2. Нормализация базы данных 


Для начала рассмотрим таблицу заказов (табл. 6.1). 


Как видно из этой таблицы, господин Иванов Иван Иванович неоднократно делал 
покупки. И каждый раз в таблицу заказов добавлялись его адрес, город и телефон. 
А теперь представьте себе ситуацию, когда господин Иванов Иван Иванович 
сменил номер телефона, — каждую запись о его покупке пришлось бы изменить. 
Кроме того, напрасно тратится пространство на жестком диске. 


По этим причинам имеет смысл вынести данные о клиенте в отдельную таблицу 
(табл. 6.2). 
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Таблица 6.1. Заказы 


Address i Product | Date_order | Price | Quantity 


Иванов Седова, Санкт- 125-14-45 2017-10-20 
Иван Иванович 7 Петербург 


Петров Сергей | Невский, Санкт- 312-12-51 2017-10-20 
Николаевич 88 Петербург 


Иванов Седова, Санкт- 125-14-45 2017-10-25 
Иван Иванович 7 Петербург 


Иванов Седова, Санкт- 125-14-45 2017-10-30 
Иван Иванович 7 Петербург 


Иванов Седова, Санкт- 125-14-45 2017-10-31 
Иван Иванович 7 Петербург 


Иванов Седова, Санкт- 125-14-45 2017-10-31 
Иван Иванович 7 Петербург 


Таблица 6.2. Данные о клиентах 


емес” “ыш ае ИИС 


Иванов Иван Иванович Седова, 7 Санкт-Петербург 125-14-45 


Петров Сергей Николаевич | Невский, 88 | Санкт-Петербург 312-12-51 


Теперь наша первоначальная таблица заказов (см. табл. 6.1) примет вид табл. 6.3. 


Таблица 6.3. Заказы 


іа Сивіотег Product Date_order i Quantity Total_price 


HDD 2017-10-20 


Тюнер 2017-10-20 


Монитор 2017-10-25 


Тюнер 2017-10-30 


Ручка 2017-10-31 


Сканер 2017-10-31 


Поле іа Customer в табл. 6.2 называется первичным ключом и содержит только YHH- 
кальные записи, т.е. однозначно определяет строку в таблице. Поле id Customer 
в табл. 6.3 называется внешним ключом и может содержать повторяющиеся записи. 
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Название города также можно вынести в отдельную таблицу (табл. 6.4). 


Таблица 6.4. Названия городов 


Санкт-Петербург 


Москва 


В итоге таблица данных о клиентах (см. табл. 6.2) примет вид табл. 6.5. 


Таблица 6.5. Данные о клиентах 


Иванов Иван Иванович Седова, 7 125-14-45 


Петров Сергей Николаевич Невский, 88 312-12-51 


Теперь то же самое можно сделать с названиями товаров (табл. 6.6). 
Таблица 6.6. Информация о товарах 


id_Product Product 
HDD 


Тюнер 


Монитор 


Ручка 


Сканер 


И таблица заказов еше уменьшится (табл. 6.7). 
Таблица 6.7. Заказы 


іа Сиѕќотег іа Рговис% Баіе огаег Quantity Total_price 
2017-10-20 
2017-10-20 
2017-10-25 
2017-10-30 
2017-10-31 
2017-10-31 
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Но и это еше не все. Создадим теперь табл. 6.8, содержащую элементы заказа. 


Таблица 6.8. Элементы заказа 


id_Order id_Product Quantity 


B итоге табл. 6.1 примет вид табл. 6.9. 


Таблица 6.9. Таблица заказов после нормализации 


іа Огаег іа Сивіотег Date_order Total_price 
2017-10-20 
2017-10-20 
2017-10-25 
2017-10-30 
2017-10-31 


Такой процесс оптимизации базы данных называется нормализацией. 


Обратите внимание: в табл. 6.8 первичный ключ является составным (поля іа Order 
и іа Product). 


На первый взгляд может показаться, что работать с такой базой данных проблема- 
тично. Но это не так. При изменении адреса или телефона покупателя достаточно 
поменять эти данные только в одной таблице. А отсутствие повторяющихся запи- 
сей позволит снизить размер базы данных. О том, как получить данные сразу 
из нескольких таблиц, мы узнаем при изучении языка SQL. Но вначале еледует 
рассмотреть типы данных, которые могут храниться в полях таблицы. 


6.3. Типы данных полей 


При создании любой таблицы необходимо принимать решение, какой тип данных 
будет содержать поле, т. к. в отличие, скажем, от массивов в РНР, в базе данных 
поле может содержать данные только одного типа. Для хранения разных типов 
данных требуется различный объем памяти. Следует выбирать тип данных, кото- 
рый требует меньшего объема памяти. 
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Типы данных делятся на числовые, строковые (в которых также можно запоминать 
бинарные данные) и типы для хранения даты и времени. 


6.3.1. Числовые типы 


Для хранения чисел используются поля следующих типов: 
П вт [(<от 1 до 64>)] — битовое значение; 


П1 TINYINT |(<Длина в символах>) | — целые числа от -128 до 127 ИЛИ от 0 до 255. 
Занимает 1 байт; 


О BOOL или BOOLEAN — либо 0, либо 1. Синоним для TINYINT (1). Занимает 1 байт; 


SMALLINT [(<Длина в символах>)] — целые числа от -32 768 до 32 767 или от 0 
до 65 535. Занимает 2 байта; 


ЕРТОМТМТ [(<Длина в символах>) |] — целые числа от -8 388 608 до 8 388 607 ИЛИ 
Т О ДО 16 777 215. Занимает 3 байта; 


М 
о 


ІМТ [(<Длина в символах>) | — Целые 4-байтовые числа; 


INTEGER [(<Длина в символах>) | -- СИНОНИМ ДЛЯ INT; 


BIGINT [(<Длина в символах>)1 — целые 8-байтовые числа; 


ооо 


SERIAL — короткая запись для следующего объявления: 
BIGINT UNSIGNED МОТ NULL AUTO INCREMENT UNIQUI 


ІН! 


O FLOAT [(<Длина в символах>, <Число знаков после запятой>)1-- вешественные 
числа с диапазоном от +1.175494351Е-38 ДО +3.402823466Е+38. Занимает 4 байта; 


ПІ DOUBLE [(<Длина в символах>, <Число знаков после запятой>) 1 -- Вешественные 
числа двойной точности. Занимает 8 байтов; 


О REAL — синоним для DOUBLE или FLOAT (в режиме REAL Аз ЕІОАТ); 


С DECIMAL |(<Длина в символах>[, <Число знаков после запятой>])] -- дробные 
числа, обеспечиваюшие повышенную точность; 


ПІ NUMERIC — СИНОНИМ ДЛЯ DECIMAL. 


Если после типа указано слово UNSIGNED, значит, поле может содержать только 
числа без знака. Если указаны слова UNSIGNED ZEROFILL, ТО пустые символы будут 
заполняться нулями. 


6.3.2. Строковые типы 


Для хранения текста и бинарных данных можно использовать следующие типы: 


С CHAR (<Длина строки в символах>) — строки фиксированной длины до 255 сим- 
волов. Строки будут дополняться пробелами до максимальной длины, незави- 
симо от размеров строки; 


С VARCHAR (<Длина строки в символах>) — строки переменной длины до 65 535 сим- 
волов; 
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С тТІМҮТЕХТ — строка до 255 символов; 


С TEXT — строка до 65 535 символов; 


С мертомтЕхт — строка до 16 777 215 символов; 


С LONGTEXT — строка до 4 294 967 295 символов. 


При поиске в текстовых полях регистр символов не учитывается. 
Бинарные типы: 
С ттмувтов — до 255 байтов; 


О вһов-- до 65 535 байтов; 


М 


Fa 


О MEDIUMBLOB — до 16 777 215 байтов; 
О LONGBLOB — до 4 294 967 295 байтов; 
О 


BINARY (<Длина строки в байтах>) — ТО же, что CHAR, но строки хранятся в би- 
нарном виде; 


С УАВВТМАВУ (<Длина строки в байтах>) — ТО же, что VARCHAR, но строки хранятся 
в бинарном виде. 


При поиске в бинарных полях учитывается регистр символов. 
Перечисления и множества: 


С SET ('Значение1', 'Значение2', ...) — поле может содержать несколько значе- 
ний из перечисленных. Может быть указано до 64 значений; 


o 


ІІ 


ОМ ("Значение1", "Значение2", ...) — поле может содержать лишь одно из 
перечисленных значений или NULL. Может быть указано до 65 535 значений. 


6.3.3. Дата и время 


Календарные ТИПЫ: 


O DATE 


дата в формате гггг-мм-дд; 


С TIME — время в формате чч:мм: сс; 


ПІ DATETIME 


дата и время в формате гггг-мм-дд чч:мм:сс; 


П YEAR [(4)] — год в четырехсимвольном формате; 


С TIMESTAMP [ (<Тип>)] — дата и время в формате timestamp (хранится в виде числа 
секунд): ОТ '1970-01-01 00:00:00" ОТС ДО '2038-01-19 03:14:07" UTC. 


6.4. Основы языка SQL 


Для выборки записей из базы данных разработан специализированный язык — SQL 
(Structured Query Language, структурированный язык запросов). С помощью этого 
языка можно создавать базы данных и таблицы, добавлять, изменять и удалять 
данные, получать данные по запросу. В настоящее время существует множество 
разновидностей языка SQL. В этой главе книги мы будем изучать SQL примени- 
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тельно к базам данных MySQL. Обратите внимание: некоторые $ОГ-команды 
работают только в MySQL. 


Команды языка SQL нечувствительны к регистру, но в книге они набраны пропис- 
ными буквами. 


6.4.1. Создание базы данных 


Для создания базы данных используется команда: 
CREATE DATABASE [ТЕ МОТ EXISTS] <Имя базы данных>; 


Пример: 


CREATE DATABASE `tests`; 


При создании базы данных можно сразу выбрать кодировку: 


CREATE DATABASE “езі” DEFAULT CHARACTER SET ср1251 
COLLATE ср1251 general сі; 


CREATE DATABASE `tests` DEFAULT CHARACTER SET utf8 
COLLATE utf8_ general сі; 


ПРИМЕЧАНИЕ 
Название базы данных заключают в обратные кавычки `tests`. 


Если база данных с указанным нами именем уже существует, мы получим сооб- 
щение об ошибке. В этом случае обезопаситься можно, предусмотрев следующую 
команду: 


CREATE DATABASE ТЕ МОТ EXISTS `tests` DEFAULT CHARACTER SET ср1251 
COLLATE ср1251 general сі; 


Для тестирования команд SQL можно воспользоваться программой phpMyAdmin, 
которая должна быть доступна по адресу http://localhost/phpmyadmin/. Не забудь- 
те предварительно запустить серверы Apache и MySQL. 


Итак, открываем программу phpMyAdmin. В правой части переходим на вкладку 
ЗОГ и в текстовом поле набираем команду: 


CREATE DATABASE “езе” DEFAULT CHARACTER SET 0648 
COLLATE utf8_ general сі; 


Нажимаем кнопку Вперед. Появится сообшение: MySQL вернула пустой резуль- 
тат (т. е. ноль строк). (Запрос занял 0,0000 сек.). Это значит, что команда созда- 
ния базы данных была успешно выполнена, но, поскольку она не выполняет выбор- 
ку данных, серверу нечего нам вывести. 


При этом новая база данных появится в иерархическом списке на левой панели. 
Выбираем из этого списка пункт tests — в правой части окна отобразится содер- 
жимое базы данных tests, точнее сказать, надпись: Таблиц в базе данных не 
обнаружено, т. к. таблицы мы еще не создавали. 
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Среди всех баз данных может быть выбрана одна текушая, к которой направляются 
все команды SQL. Выбирается текущая база данных с помощью команды SQL: 


USE <База данных>; 


Например, только что созданную базу данных tests можно выбрать 5ОІ.-командой 


USE `tests`; 


В верхней части страницы расположены вкладки: Структура, SQL, Поиск, Запрос 
по шаблону, Экспорт, Импорт, Операции и др. Если в окне не будет хватать мес- 
та для вывода всех этих вкладок, то в верхней части окна появится кнопка Еше, 
при нажатии на которую откроется меню со всеми не представленными на экране 
вкладками. 


Далее нас будет интересовать вкладка SQL. Все дальнейшие 50ОІ.-запросы к базе 
данных мы будем набирать именно здесь. Итак, вначале выбираем базу данных 
из списка на левой панели, а затем выполняем ЗОГ.-запросы на вкладке SQL, pac- 
положенной на правой панели. Над правой панелью должна быть надпись: База 
данных: tests. 


6.4.2. Создание пользователя базы данных 


После создания базы данных необходимо создать пользователя базы данных и на- 
значить ему полномочия. Полномочия (или привилегии) — это права определенного 
пользователя выполнять заданные действия над определенным объектом. Поль- 
зователь должен обладать наименьшим набором привилегий, необходимых для 
выполнения конкретных задач. 


Создание и назначение полномочий осуществляются ЗОГ.-командой: 


GRANT <Привилегии> [<Столбць>] 

ОМ <База данных>.<Таблица> 

ТО <Имя пользователя> [IDENTIFIED ВУ '<Пароль>'] 
[WITH GRANT OPTION]; 


В параметре <Привилегии> могут быть указаны через запятую следующие полно- 
мочия: 


С ALL или ALL PRIVILEGES — все полномочия, кроме CRANT OPTION И PROXY; 

П озлсЕ — без всех полномочий; 

П SELECT — возможность выбирать записи в таблицах; 

П INSERT — право вставлять новые записи в таблицы; 

П UPDATE — полномочия изменять значения в существующих полях таблиц; 

С DELETE — разрешение удалять записи; 

П FILE — возможность сохранять данные из таблиц в файл и, наоборот, восстанав- 


ливать их из файла; 
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С CREATE — право создавать новые базы данных или таблицы. Если в команде 
GRANT указана определенная база данных или таблица, то пользователь может 
создавать только указанную базу данных или таблицу; 

С CREATE TEMPORARY TABLES — разрешение создавать временные таблицы; 

С CREATE USER — разрешение создавать, править и удалять пользователей; 

П ALTER — полномочия изменять структуру существующих таблиц; 

С INDEX — право создавать и удалять индексы определенных таблиц; 

С DROP — возможность удаления базы данных или таблицы; 

С PROCESS — разрешение просматривать процессы на сервере; 

С RELOAD — возможность перезагружать таблицы полномочий; 

С SHUTDOWN — право останавливать сервер MySQL; 

С SHOW DATABASES — разрешение на просмотр списка всех баз данных на сервере. 


В необязательном параметре <столбцы> может быть указан список имен столбцов, 
разделенных запятыми, к которым применяются привилегии. 


В параметре <База данных>.<Таблица> может быть указано: 
П +. * или * — полномочия предоставляются для всех баз данных в целом; 
П <Имя базы данных>.* — полномочия для всех таблиц указанной базы данных; 


O <Имя базы данных>.<Имя таблицы> — привилегии ОТНОСЯТСЯ ТОЛЬКО К указанной 
таблице В указанной базе данных. Если дополнительно задан параметр <Столбцы>, 
то полномочия назначаются для указанных столбцов. 


В параметре <Имя пользователя> указывается имя пользователя (например, den) или 
Имя пользователя@Имя хоста (например, депё1оса1ћоѕ+). Новому пользователю MOX- 
но назначить пароль. 


Если указана ОПЦИЯ WITH GRANT OPTION, то пользователь может предоставлять свои 
полномочия другим. 


Создадим нового пользователя с именем den и назначим ему ограниченные приви- 
легии. Для этого на вкладке SQL набираем следующую команду: 


GRANT select, insert, update, delete, index, alter, create, drop 
ON `tests`.* 
ТО den@localhost IDENTIFIED ВУ '123'; 


и нажимаем кнопку Вперед. В итоге отобразится надпись: MySQL вернула пустой 
результат (т. е. ноль строк). (Запрос занял 0,0000 сек.). 


После создания пользователя или изменения привилегий необходимо перезагрузить 
привилегии с помощью ЗОГ-команды: 


FLUSH PRIVILEGES; 


Для лишения пользователя полномочий служит команда SQL: 


REVOKE <Привилегии> І<Столбцы> | 
ОМ <База данных>.<Таблица> 
FROM <Имя пользователя>; 


Основы MySQL. Работаем с базами данных 


775 


Если полномочия были предоставлены опцией WITH GRANT OPTION, ТО удалить их 


можно с помощью команды SQL: 


REVOKE GRANT OPTION 
ОМ <База данных>.<Таблица> 


ЕВОМ <Имя пользователя>; 


SHOW GRANTS FOR '<Имя пользователя>' @'<Хост>!; 


SHOW GRANTS FOR 'аӢеп'@'1оса1һоѕі'; 


6.4.3. Создание таблицы 


Для просмотра прав пользователя предназначена команда SQL: 


Для примера выведем полномочия созданного пользователя деп: 


Для удаления пользователя используется ЗОГ-команда: 


DROP USER [ТЕ EXISTS] '<Имя пользователя>' @'<Хост>'; 


Создать таблицу в базе данных позволяет 5ОІ.-команда: 


CREATE TABLE [ТЕ МОТ EXISTS] <Имя таблицы> ( 
<Имя поля1> <Тип данных> [<Опции>], 


<Имя поля2> <Тип данных> [<Опции>], 


) [<Дополнительные опции>]; 


При попытке создать таблицу с именем, совпадающим с именем уже существую- 
щей в базе таблицы, будет сгенерирована ошибка. Чтобы исключить ее, следует 


вставить в команду создания таблицы слова ТЕ NOT 


EXISTS. 


B параметре <Опции> МОГУТ быть указаны следующие значения: 


П мот мот, — означает, что поле обязательно должно иметь значение при вставке 
новой записи в таблицу (если не задано значение по умолчанию). Если опция не 


указана, то поле может быть пустым; 


С] PRIMARY KEY — указывает, что поле является первичным ключом таблицы. Запи- 
си в таком поле должны быть уникальными. Опция также может быть указана 


после перечисления всех полей; 


С лото INCREMENT — указывает, что поле является счетчиком: если при вставке HO- 
вой записи указать NULL, то MySQL автоматически генерирует значение, на еди- 
ницу большее максимального значения, уже существующего в поле. В таблице 


может быть только одно поле с этой опцией; 


а 
5 


О 


ПІ COLLATE 


ЕҒАПТТ — задает для поля значение по умолчанию, которое будет использовано, 
если при вставке записи для этого поля не было явно указано значение; 


CHARACTER SET — определяет кодировку текстового поля; 


задает способ сравнения для текстового поля. 
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Возможные значения параметра <Дополнительные опции>: 


O ENGINE 


тип таблицы (например, MyISAM ИЛИ InnoDB); 


ПРИМЕЧАНИЕ 


На практике обычно используются два типа таблиц: MyISAM И InnoDB. По умолчанию 
используется тип ІппорВ. В отличие от типа MyISAM, таблицы типа тппорв более устой- 
чивы к сбоям, поддерживают транзакции и внешние ключи, но работают несколько 
медленнее. 


С [DEFAULT] CHARSET — кодировка (например, utf8); 


П COLLATE 


задает способ сравнения; 


п AUTO INCREMENT — начальное значение для автоматической генерации значения 
ПОЛЯ. 


Для вывода всех типов таблиц, поддерживаемых текущей версией MySQL, предна- 
значена ЗОГ-команда: 


SHOW ENGINES; 


Для вывода всех кодировок применяется ЗОГ-команда: 


SHOW CHARACTER SET; 


Чтобы получить список всех типов сортировки, можно воспользоваться SQL- 
командой: 


SHOW COLLATION; 


Создадим таблицы из нашего первоначально рассмотренного примера. Для этого 
в левой части окна программы из списка выбираем базу tests, а в правой — вкладку 
SQL. 
В текстовом поле набираем следующие команды: 
CREATE TABLE `Сібіеѕ` ( 
`id Сібу` INT NOT NULL AUTO INCREMENT, 
`City` VARCHAR (255) МОТ NULL, 
PRIMARY KEY (`id City`) 
) ENGINE=MyISAM CHARSET=utf8 COLLATE utf8 general ci; 


CREATE TABLE `Сиѕіотегѕ` ( 
`id Сиѕіопег ` INT МОТ NULL AUTO INCREMENT, 
`Name` VARCHAR (255) NOT NULL, 
`Address` VARCHAR (255) МОТ NULL, 

“іа CIty” INT NOT NULL, 
`Phone` VARCHAR (255), 
PRIMARY KEY (Cid Customer`) 
) ENGINE=MyISAM CHARSET=utf8 COLLATE utf8 general сі; 


CREATE TABLE `Products` ( 
714 Product`ò INT NOT NULL AUTO INCREMENT, 
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`Product` VARCHAR (255) МОТ NULL, 
`Price` INT NOT NULL, 
PRIMARY KEY (`іа Product`) 
) ENGINE=MyISAM CHARSET=utf8 COLLATE utf8_ general сі; 


CREATE TABLE `Orders_Items` ( 
`id Огаег` INT NOT NULL, 
`id Product`ò INT NOT NULL, 
`Quantity` INT UNSIGNED, 
PRIMARY KEY (`id Огаек`, `id_Product`) 

) ENGINE=MyISAM CHARSET=utf8 COLLATE utf8 general ci; 


CREATE TABLE `Orders`ò ( 
`id_Order` INT NOT NULL AUTO INCREMENT, 
`id Customer` INT NOT NULL, 
`Date_order` DATE, 
`Total_price` INT, 
PRIMARY KEY (Cid Order`) 

) ENGINE=MyISAM CHARSET=utf8 COLLATE utf8 general сі; 


Можно набрать все команды одновременно, а можно и по отдельности. Чтобы 
выполнить запрос, нажимаем кнопку Вперед. Все созданные таблицы отображаются 
слева под списком баз данных (пункт Новая ведет на страницу создания новой 
таблицы): 


tests 
Новая 
cities 
customers 
orders 
orders_items 
products 


Если таблицы не отобразились, то обновите страницу. 


Если щелкнуть на названии таблицы, то справа отобразятся вкладки, с помощью 
которых можно увидеть содержимое таблицы, ее структуру ит. д. 


Вывести все таблицы из указанной базы данных позволяет ОГ -команда: 


SHOW TABLES FROM <Имя базы данных>; 


Для примера выведем все таблицы из базы данных tests: 


SHOW TABLES FROM `tests`; 


Чтобы отобразить структуру конкретной таблицы из указанной базы данных, MOX- 
но воспользоваться командой SQL: 


SHOW COLUMNS FROM <Таблица> FROM <Имя базы данных>; 


Для примера выведем структуру таблицы Cities из базы данных tests: 


SHOW COLUMNS FROM `Сібіеѕ` FROM `tests`; 
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Для отображения структуры таблицы можно также воспользоваться операторами 
EXPLAIN ИЛИ DESCRIBE (СИНОНИМ EXPLAIN): 


EXPLAIN | DESCRIBE <Имя таблицы; 


Пример: 


EXPLAIN `Cities`; 


6.4.4. Добавление данных в таблицу 


Для добавления записей в таблицу используется 5ОІ.-команда: 


INSERT INTO <Имя таблицы> [(<Поле1>, <Поле2>, ...)] 
VALUES ('<Значение1>', "<Значение2>", ...); 
INSERT INTO <Имя таблицы» 


SET <Поле1>='<Значение1>', <Поле2>='<Значение2>', ...; 


H а H 


Например, добавить две записи в таблицу Cities можно одним из следующих CNO- 
собов: 


INSERT INTO `Cities` (Cid City`, “Сіку”) 
VALUES (NULL, 'Санкт-Петербург'); 

INSERT INTO `Cities` (1а City`, Су) 
VALUES (NULL, "Москва"); 

INSERT INTO `Cities`ò (`City`) 

VALUES ("Санкт-Петербург"); 

INSERT INTO `Cities`ò (`City`) 

VALUES ("Москва"); 


ЕТ `id City`=NULL, `Сіёу`='Санкт-Петербург!'; 


U HUH 
| 


ЕТ `1а Сіғу -МОШ,, `Сібу`='Москва!'; 


SERT INTO `Cities` 
ЕТ `Сібу`='Санкт-Петербург'; 
SERT INTO `Cities` 
ЕТ `City`='MockBa'; 


он о н 


н 
о 
Еі 
ре] 

3 
н 


ТО “Сісіев” VALUES 
(NULL, "Санкт-Петербург"), 


(NULL, "Москва"); 


INSERT INTO `Cities` VALUES (NULL, "Санкт-Петербург"); 
INSERT INTO `Cities` VALUES (NULL, "Москва"); 


Обратите внимание: для первого поля мы указали значение NULL, т. к. для этого 
поля установлена опция AUTO INCREMENT, И MySQL автоматически вставит значение 
в поле. 
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Если название таблицы содержит пробел или совпадает с одним из ключевых слов 
MySQL, то название таблицы необходимо заключить в обратные кавычки. 


Давайте теперь заполним наши созданные таблицы значениями. Для этого выпол- 
ним следующие ЗОГ-команды: 


INSERT INTO `С1Е1ез` VALUES 
(1, "Санкт-Петербург"), 


(2, "Москва"); 


INSERT INTO `Сазбомегз` VALUES 
(1, "Иванов Иван Иванович", "Седова, 7', 1, 1125-14-45"), 


(2, "Петров Сергей Николаевич", "Невский, 88', 1, 312-12-51"); 


INSERT INTO `Products` VALUES 
, 'HDD', 3400), 
‚ 'Тюнер', 3100), 

онитор', 7200), 

, 'Ручка', 10), 

‚ 'Сканер', 6000); 


опы мы 
- 


INSERT INTO `Orders_Items` VALUES 
1%“ уҙ 
Zra Ley 
Эх) 

‚2, 1), 
4, 10), 
Эу) 


INSERT INTO “Окдегв” VALUI 


5 


(1, 1, "2017-10-20", 3400), 
(2, 2, '2017-10-20', 3100), 
(3,1 52011-10-25)! 2120095, 
(4, 1, "2017-10-30", 3100), 
(5, 1, "2017-10-31", 6100); 


Обратите внимание: числа в кавычки не заключаются. А чтобы сохранить целост- 
ность базы данных, индексы указываются явным образом. 


Если предпринимается попытка вставить запись, а в таблице уже есть запись с та- 
ким же значением первичного ключа (или значение индекса UNIQUE не уникально), 
то такая ЗОГ-команда приводит к ошибке. Если необходимо, чтобы подобные 
неуникальные записи обновлялись без вывода сообщения об ошибке, можно 
использовать следующую ЗОГ-команду: 


REPLACE [INTO] <Имя таблицы> [(<Поле1>, <Поле2>, ...)1 
VALUES ('<Значение1>', "<Значение2>", ...); 


В качестве примера изменим номер телефона господина Иванова: 


REPLACE `Customers`ò VALUES 
(1, "Иванов Иван Иванович", 'Седова, 7', 1, 1125-14-47"); 
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Если передать уникальное значение, то 5ОГ-команда ВЕРГАСЕ аналогична команде 


REPLACE `Сазфомегз` VALUES 


6.4.5. Обновление записей 


Обновление записи осуществляется 5ОІ.-командой: 


UPDATE <Имя таблицы> 
Поле1>='<Значение1>', <Поле2>='<Значение2>', 
WHERE <Условие>; 


о 
ІН 
н 
А 


ВНИМАНИЕ! 


INSERT. Например, следующая 501 -команда добавит нового покупателя: 


(NULL, "Сидоров Олег Николаевич", "Передовиков, 12', 1, '529-15-63'); 


Если не указано <условие>, то будут обновлены все записи в таблице. 


В параметре <Условие> могут быть указаны следующие операторы: 
= — проверка на равенство; 
> — больше; 
< — меньше; 


>= — больше или равно; 


! = или <> — не равно; 
IS МОТ NULL — проверка на наличие значения; 


IS NULL — проверка поля на отсутствие значения; 
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О 
О 
o 
o 
С <--- меньше или равно; 
o 
o 
o 
О 


ВЕТИ 


ЕМ <Начало> AND <Конец> — проверяет, является ли значение большим или 


равным значению <Начало> и меньшим или равным значению <Конец>. Напри- 


Al 


мер: `1а Customer` BETWEEN 1 AND 3; 


O тм — содержится в определенном наборе. Например: `Product 
'HDD'); 

П мот IN— не содержится в определенном наборе. Например: 
('Монитор', 'HDD'); 


O LIKE 


соответствие шаблону SQL. Например: `Product` LIKE 


П мот LIKE 


несоответствие шаблону SQL. 
В шаблоне SQL могут использоваться следующие символы: 
О + — любое число символов; 


С — — любой одиночный символ. 


` IN ("Монитор", 


`Productò МОТ IN 


Можно проверять сразу несколько условий, соединив их логическими операциями: 


O AND или && — логическое и; 


О окили | | — логическое или; 
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O хок — логическое исключающее или; 
O кот или ! — логическое отрицание. 


Если название таблицы содержит пробел или совпадает с одним из ключевых слов 
MySQL, то название таблицы необходимо заключить в обратные кавычки. Для 
примера изменим телефон одного из клиентов, например Иванова: 


UPDATE `Сазбомегз` SET `Рропе`='125-14-46' WHERE `іа Customer`=1; 


Господин Иванов y нас числится под номером 1 в таблице Customers. Это условие 
мы и указали. 


6.4.6. Удаление записей из таблицы 


Удаление записи осуществляется $01 -командой: 


DELETE FROM <Имя таблицы» WHERE <Условие> | LIMIT <Число> |]; 


ВНИМАНИЕ! 
Если <Условие> не указано, то будут удалены все записи из таблицы. 


С помощью конструкции LIMIT можно ограничить максимальное число удаляемых 
записей. В качестве примера удалим клиента по фамилии Сидоров: 


DELETE FROM `Customers` WHERE “Мате” LIKE "Сидоров %' LIMIT 1; 


В этом примере мы удалим первого клиента с фамилией сидоров. Клиентов с оди- 
наковыми фамилиями может быть очень много, и таким запросом мы можем уда- 
лить не того клиента. В нашем примере все будет работать правильно, т. к. клиент 
всего один. На практике нужно знать уникальный номер клиента и именно его ука- 
зывать в качестве условия: 


DELETE FROM `Customers` WHERE `іа Customer`=3; 


Для очистки определенной таблицы служит 50ОІ.-команда: 


TRUNCATE TABLE <Имя таблицы>; 


Частое обновление и удаление записей приводит к фрагментации таблицы. Чтобы 
освободить неиспользуемое свободное пространство, можно воспользоваться SQL- 
командой: 


OPTIMIZE TABLE <Имя таблицы>; 


Если таблица была повреждена, то восстановить ее позволяет 5ОГ-команда: 


REPAIR TABLE <Имя таблицы»; 


6.4.7. Изменение структуры таблицы 


В ряде случаев нужно изменить структуру уже созданной таблицы. Для этого ис- 
пользуется ЗОГ-команда: 


ALTER TABLE <Имя таблицы» 
<Преобразование>; 
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В параметре <Преобразование> МОГУТ быть указаны следующие инструкции: 


С] RENAME <Новое имя таблицы> -- переименовывает таблицу; 


ПІ ADD <Имя нового поля> <Тип данных> [FIRST | AFTER <Имя поля>| -- добавляет 
В таблицу новое поле. Если указана опция FIRST, то поле будет добавлено в са- 
мое начало, а если AFTER <Имя поля> — TO После указанного поля. По умолчанию 


новое поле вставляется в конец таблицы. 


Обратите внимание: в новом поле 


нужно задать значение по умолчанию, или значение NULL должно быть допусти- 


мым, т. к. в таблице уже есть записи; 


С] ADD PRIMARY KEY (<Имя поля>) — делает указанное поле первичным ключом; 


С DROP PRIMARY KEY — удаляет первичный ключ; 


ПІ CHANGE <Имя поля> «Новое имя поля> <Новые 


параметры поля> — изменяет свой- 


ства поля. С помощью этой инструкции поле можно переименовать. Если этого 
не требуется, ТО <Новое имя поля> ДОЛЖНО содержать то же имя, что и <Имя поля>; 


O MODIFY <Имя поля> <Тин данных> — изменяет 
O DROP <Имя поля>-- удаляет поле. 
Для примера изменим тип данных поля Address 


ALTER TABLE `Customers` 
CHANGE `Address`ò `Address` VARCHAR (200) NOT N 


6.4.8. Выбор записей 


Выполнить запрос позволяет $ОГ.-команда: 


ELECT <Поле1>, <Поле2>, 


5 

ЕВОМ <Имя таблицы> 

[ WHERE <Условие1> ] 

[ GROUP ВУ <Имя поля1> ] [ HAVING <Условие2> 
[ ORDER ВУ <Имя поля2> [0Е$С]] 

[ LIMIT <Начало>, <Число записей> | 


свойства поля; 


в таблице Customers: 


ULL; 


] 


ЗОГ-команда SELECT ищет все записи в таблице <Имя таблицы>, которые удовлетво- 
ряют выражению <Условие1>. Если конструкция ИНЕВЕ <Условие1> опущена, то 
будут возвращены все записи из таблицы <Имя таблицы>. Вместо перечисления 
полей можно указать символ *. В этом случае будут возвращены все поля. 


Найденные записи при указанной конструкции ORDER BY <Имя поля2> СОртируются 


по возрастанию. Если в конце указано слово DI 
в обратном порядке. 


ESC, то записи будут отсортированы 


Для начала выберем все записи из таблицы Cities, НО ЛИШЬ ИЗ ОДНОГО ПОЛЯ: 


SELECT “Сіку” FROM `Cities`; 


В результате будут возврашены только названия городов: 


Санкт-Петербург 
Москва 
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Если вместо названия поля указать символ *, то будут возвращены все поля: 


SELECT * FROM `Cities`; 


Этот запрос вернет: 


1 Санкт-Петербург 
2 Москва 


Выведем названия городов по алфавиту: 


SELECT % FROM `С1Е1ез` ORDER ВУ `City`; 


Теперь названия будут отсортированы: 


2 Москва 
1 Санкт-Петербург 


Выведем только город с индексом 2: 


SELECT % FROM `Cities` WHERE `1а City`=2; 


B результате мы получим один город: 


2 Москва 


Если требуется, чтобы при поиске выдавались не все найденные записи, а лишь их 
часть, то нужно использовать параметр ттмтт. Этот параметр удобен при выводе 
большого числа записей. Например, есть каталог из 2 000 записей. Вместо того 
чтобы выводить его за один раз, можно выводить его частями — скажем, по 25 запи- 
сей за раз. В параметре LIMIT задаются два значения: <Начало> И <Число записей>: 


SELECT * FROM `С1Е1ез` ORDER ВУ `City` LIMIT 0, 25; 


Обратите внимание, что первая запись имеет индекс 0. Если в таблице Cities было 
бы более 25 записей, то мы бы получили только первые 25. 


Выберем следующие 25 записей: 
SELECT * FROM `Сібіеѕ` ORDER ВУ `Сібу` LIMIT 25, 25; 


Кроме того, команда SELECT позволяет использовать следующие функции, называе- 
мые агрегатными функциями: 


С соохт(<Поле>) — число непустых (т.е. не имеющих значение NULL) записей 
в указанном поле; 

С мім(<Поле>) — минимальное значение в указанном поле; 

С мах (<Поле>) — максимальное значение в указанном поле; 

O 5оМ(<Поле>) — сумма значений в указанном поле; 

П дус(<Поле>) — средняя величина значений в указанном поле. 


Выведем общее количество заказов: 


SELECT СООМТ(`1а Огаег`) FROM `Огаегз`; 


Этот 5ОГ-запрос выведет: 5. 
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Теперь найдем минимальную сумму заказа: 


SELECT MIN(`Total рг1се`) FROM `Огаегз`; 


В результате получим: 3100. 
А теперь выясним максимальную сумму заказа: 


SELECT МАХ (`Тоба1 рг1се`) FROM `Огаегз`; 


И получим ответ: 7200. 


Для получения более подробной информации можно воспользоваться конструкци- 
ей GROUP ву. Например, так можно посмотреть среднюю сумму покупок каждого 
покупателя: 


SELECT `1а Customer`, АУС(`Тофа1 ргісе`) AS s 
FROM `Orders` 

GROUP BY 7142 Customer` 

ORDER BY s; 


ВНИМАНИЕ! 


Мы используем псевдоним для имени поля и по нему сортируем записи от меньшего 
результата к большему. 


Если нужно, например, выбрать клиентов, заказавших больше определенной сум- 
мы, то можно воспользоваться конструкцией HAVING. Она выполняет те же функции, 
что и конструкция WHERE, но только для конструкции GROUP BY: 


SELECT `1а Сазбомек`, SUM(`Total_price`) AS s 
FROM `Orders` 

GROUP BY `id_Customer` 

HAVING s > 4000 

ORDER BY s; 


Можно в одном запросе использовать конструкции и WHERE, И HAVING. В этом случае 
сперва отбираются записи, указанные в конструкции WHERE, они группируются, и по 
ним вычисляются агрегатные функции, а затем из результата отбираются ЛИШЬ 
те записи, которые удовлетворяют условию в конструкции HAVING. 


6.4.9. Выбор записей из нескольких таблиц 


5ОІ.-команда SELECT позволяет выбирать записи сразу из нескольких таблиц одно- 
временно. Для этого нужно указать все таблицы через запятую в конструкции FROM. 
В конструкции WHERE через запятую указываются пары полей, являющиеся связуе- 
мыми для таблиц. Причем в условии и перечне полей вначале указывается имя таб- 
лицы, а затем — через точку — имя поля. 


Для примера выведем таблицу Customers, но вместо индекса города укажем его 
название: 


SELECT `Customers`.`Name`, `Customers`.`Address`ò, `Cities`.`City`, 
`Customers`. `Phone` 

FROM `Customers`, `Cities` 

WHERE `Customers`.`id City`=`Cities`.`id City`; 
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В итоге мы получим табл. 6.10. 


Таблица 6.10. Данные о клиентах 


ром 


Иванов Иван Иванович Седова, 7 Санкт-Петербург 125-14-46 


Петров Сергей Невский, 88 Санкт-Петербург 312-12-51 
Николаевич 


Название таблицы можно заменить псевдонимом, который создается через ключе- 
вое слово Аз после имени таблицы в конструкции FROM. Перепишем предыдуший 
пример с использованием псевдонимов: 

SELECT `с`.`Маме`, `с`.`Адатезз`, `сі`.`Сіёу`, `с`. `Рћопе` 

FROM `Сиѕіотегѕ` AS Сс”, `Cities`ò AS `ct` 

WHERE `с`.`1а Сібу`=`сі`.`іа City`; 


Результат будет таким же. Кроме ТОГО, ЕСЛИ ПОЛЯ В таблицах имеют разные назва- 
НИЯ, ТО ИМЯ таблицы можно не указывать: 

SELECT “Мате”, `Ааагезз`, `City`ò, `РБопе` 

FROM `Сиѕіотегѕ` AS Сс”, `Cities`ò AS `ct` 

НЕВЕ `с`.`1а Сібу`=`сі`.`:1а сісу?; 


= 


А теперь выведем нашу первоначальную таблицу (см. табл. 6.1): 


оз 


ELECT “с”. “-Мапе”, `с`.`Ааагезз`, `сЕ`.`С1еу`, Сс” .СРһопе”, 
`p`. РкодисФ”, `o`.`Date_order`, `р`.`Ргрісе`, `oi`.`Quantity` 
FROM `Customers`ò AS Сс”, `Citiesò AS `ct`ò`, `Products`ò Аб Ср”, 
`Orders`ò А5 Со”, `Orders_Items` AS `oi` 
WHERE Сс”. `1а Сібу`=`сі` % `1а City` AND 

`oi`.`id Огаег`=`о`.`1а Огаег` AND 

`р`.`1а Product`=`^oi`.`id_Product` AND 

`о`.`1а Сиѕіотег `=`с`.`іа Соиѕіотег` 
ORDER ВУ `о`.`14а Огаек`, `p`.`Product`; 


В итоге мы получим табл. 6.11. 


Таблица 6.11. Таблица заказов 


Address і Product | Байе огаег Quantity 


Иванов Седова, 7 Санкт- 125-14-46 2017-10-20 
Иван Иванович Петербург 


Петров Сергей Невский, 88 Санкт- 312-12-51 2017-10-20 
Николаевич Петербург 


Иванов Седова, 7 Санкт- 125-14-46 2017-10-25 
Иван Иванович Петербург 


Иванов Седова, 7 Санкт- 125-14-46 2017-10-30 
Иван Иванович Петербург 
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Таблица 6.11 (окончание) 


рая T o р оне Pre авт 


Иванов 
Иван Иванович 


Санкт- 125-1 


Петербург 


Седова, 7 


4-46 | Ручка | 2017-10-31 


Иванов 
Иван Иванович 


Санкт- 125-1 


Петербург 


Седова, 7 


4-46 | Сканер | 2017-10-31 


Эта таблица практически совпадает с табл. 6.1, но с двумя исключениями: 


С нет поля Total ргісе. Получить это поле несложно — достаточно перемножить 
значения полей Price И Quantity; 


п номер телефона господина Иванова изменился, т. к. мы его чуть раньше сами 
поменяли. 


Связывать таблицы можно также с помощью оператора JOIN. Для примера выведем 


таблицу Customers, НО вместо индекса города укажем его название: 

SELECT `Customers`.`Name`, `Customers`.`Address`ò, `Cities`.`City`, 
`Customers`. `Phone` 

FROM `Customers` JOIN `Cities` 

ОМ `Customers`.`id City`=`Cities`.`id Сіғу?; 


Отметим, что в этом случае вместо оператора ин! 


ERE 


мы используем ON. 


Если необходимо указать дополнительное условие выборки, то это делают в инст- 
рукции ИНЕВЕ 


F 


ERE. 


Для примера выведем информацию о клиентах с фамилией Иванов: 


SELECT `Customers`.` Name`ò, `Customers`.`Address`ò, `Cities`.`City`, 
`Customers`.`Phone` 

FROM `Сиѕіотегѕ` JOIN `Cities` 

ОМ `Сизбощегз`.`1а City = Cities id- Crty 

WHERE `Customers`.`Name` LIKE "Иванов %'; 


Если названия полей в таблицах одинаковые, то инструкцию ом можно заменить на 


USING: 

SELECT `Customers`.` Name`ò, `Customers`.`Address`ò, `Cities`.`City`, 
`Customers`. `Phone` 

FROM `Customers` JOIN `С1Е1ез` USING (`1а Сі+у`); 


Оператор JOIN позволяет также объединить несколько таблиц. В качестве примера 
выведем нашу первоначальную таблицу (см. табл. 6.1): 


SELECT `с`.`Маме`, `с`.`Адатгезз`, “Сау; “Рһопе”, 
`р`. `Ргоаосі`, “Пабе огаек`, `р`.`Ргісе`, `Quantity` 
FROM `Customers`ò А5 Сс” JOIN `Сібіеѕ` А5 “сы” JOIN `Products`ò А5 `p` 
JOIN `Ordersò А5 `о` JOIN `Orders_Items` AS `oi` 
6) `1а Сібу`=`сё`.`іа City` AND 
`01`.`1а Order`= `1а Огаег` AND 
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`р`.`1а Ргоаџсё `=`оі`.`іа Product -AND 
`о`.`1а Сазбощек`=`с`.`1а Сиѕіотег` 
ORDER ВУ `о`.`1а Огаек`, `p`.`Product`; 


ПРИМЕЧАНИЕ 
Оператор JOIN имеет два синонима: CROSS JOIN и INNER JOIN. 


Добавим нового клиента в таблицу Customers и выведем общее число заказов каж- 
дого клиента: 


INSERT INTO `Сазбомегз` VALUES 

(NULL, "Сидоров Олег Николаевич", "Передовиков, 12', 1, '529-15-63'); 
SELECT `Customers`.`Name`, COUNT (`Огаегз`.`1а Огаег`) 

FROM `Customers` JOIN `Огаегз` USING (714 Customer`) 

GROUP BY `Огаегз`.`1а Customer`; 


Получим следующий результат: 


Иванов Иван Иванович 
Петров Сергей Николаевич 1 


Как видно из примера, этот запрос вывел только клиентов, сделавших хотя бы ОДИН 
заказ. Так как господин Сидоров не сделал ни одного заказа, то в таблице Orders 
отсутствует запись о нем. Чтобы получить всех клиентов, необходимо использовать 
левостороннее обьединение с помощью инструкции LEFT JOIN: 


<Таблица1> LEFT [OUTER] JOIN <Таблица2> ОМ 
<Таблица1>.<Поле1>=<Таблица2>.<Поле2> 


т 


Ключевое слово OUTER необязательное — его поддержка оставлена для совместимо- 
сти со стандартом SQL. 


Если названия полей в таблицах одинаковые, то вместо инструкции оч можно ис- 
пользовать инструкцию USING: 


<Таблица1> LEFT [OUTER] JOIN <Таблица2> USING (<Поле>) 


При левостороннем обьединении возвращаются записи, соответствующие условию 
<Таблица1>.<Поле1>-<Таблица2>.<Поле2>, а также записи из таблицы <Таблица1>, КО- 
торым нет соответствия в таблице <Таблица2> (при ЭТОМ ПОЛЯ ИЗ таблицы <Таблица2> 
будут иметь значение NULL). 


Выведем общее число заказов каждого клиента с помощью левостороннего объ- 
единения: 


SELECT `Customers`.`Name`, COUNT (`Огаегѕ`.`іа Огадег`) AS `total` 
FROM `Customers` LEFT JOIN `Огаегз` USING (714 Соѕіотег`) 

GROUP BY `Огаегз`.`1а Customer` 

ORDER ВУ `total` DESC; 


Получим следующий результат: 


Иванов Иван Иванович 
Петров Сергей Николаевич 1 
Сидоров Олег Николаевич 0 
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Кроме левостороннего, можно применить иравостороннее объединение с помощью 
инструкции RIGHT JOIN: 


<Таблица1> RIGHT [OUTER] JOIN <Таблица2> ОМ 
<Таблица1>.<Полеі>-<Таблица2>.<Поле2> 


Здесь также допустима конструкция с ключевым словом USING, если названия полей 
в обеих таблицах совпадают: 


<Таблица1> RIGHT [OUTER] JOIN <Таблица2> USING (<Поле>) 


При правостороннем обьединении возвращаются записи, соответствующие усло- 
ВИЮ <Таблица1>.<Поле1>-<Таблица2>.<Поле2>, а также записи из таблицы <Таблица2>, 
которым нет соответствия в таблице <Таблица1> (при ЭТОМ ПОЛЯ ИЗ таблицы <Табли- 
ца1> будут иметь значение NULL). 


Выведем обшее число заказов каждого клиента с помощью правостороннего объ- 
единения: 


SELECT `Customers`.`Name`, COUNT (`Огаегѕ`.`іа Огадег`) AS `total` 
FROM `Огаегз` RIGHT JOIN `Сазбомегз` USING (`1а Customer`) 

GROUP BY `Огаегз`.`1а Customer` 

ORDER BY `total` DESC; 


В этом примере мы просто поменяли местами таблицы в инструкции FROM: 


FROM `Огаегз` RIGHT JOIN `Сазбомег$` 


6.4.10. Индексы. Ускорение выполнения запросов 


Для определения эффективности ЗОГ.-запроса предусмотрены операторы EXPLAIN 
H DESCRIBE. Они выполняют одну и ту же задачу и имеют следующий формат: 


EXPLAIN | 
EXPLAIN | 


ESCRIBE <Имя таблицьы>; 
ESCRIBE <5ОТ-запрос>; 


DI 
DI 


т 


Первый вариант выведет структуру указанной таблицы, а второй вариант позволяет 
выяснить, каким образом выполняется запрос с помощью 501 -команды SELECT. 


В качестве примера выведем результат поиска клиента по его полному имени: 


EXPLAIN SELECT * FROM `Customers` WHERE `Мапе`='Иванов Иван Иванович"; 


Эта команда вернет результат, показанный на рис. 6.1. 


Рассмотрим результат выполнения команды EXPLAIN ПО столбцам: 


О іа — порядковый номер выполненного запроса; 


С select_type — тип запроса. В нашем случае: SIMPLE, т. е. простой запрос; 
О table — название таблицы или таблиц, к которым был выполнен запрос; 


п type — эффективность выполнения запроса. Может принимать значения ALL, 


index, range, index subquery, unique_subquery, index merge, ref ок null, fulltext, 
ref, eq_ref, const H system. Приведенные здесь значения расположены по возрас- 
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танию степени эффективности запроса. Значение ALL означает, что просматри- 
ваются все записи таблицы, -- это самый неэффективный способ; 


п possible_keys — список всех доступных индексов или NULL, если таковых нет; 


п кеу — название задействованного в процессе выполнения запроса индекса или 
NULL, если ни один индекс не использовался; 


С кеу Іеп — длина использованного индекса или NULL, если индексы не использо- 
вались; 


O ref — названия полей, значения которых сравнивались со значениями, взятыми 
из индекса, или NULL, если индексы не использовались; 


о 


rows — ЧИСЛО просмотренных в процессе выполнения запроса записей таблицы; 


O Extra — дополнительные сведения о выполнении запроса. 


5О1-запрос успешно выполнен. 


EXPLAIN SZLE * FROM ‘Customers WHERE `Маме`='Иванов Иван Иванович" 


[ Построчное редактирование || Изменить | [ Убрать анализ 501 | | Результат анализа 
mariadb.org ] [ Создать РНР-код | 


% Параметры 
id select type table type possible_keys key key len ref rows Extra 


1 SIMPLE Customers ALL ULL ULL NULL VULL 3 Using 
where 


Рис. 6.1. Результат, возврашенный командой EXPLAIN 


Как видно из приведенного примера, для выполнения запроса пришлось просмат- 
ривать все записи таблицы Customers, Т.К. записи в неиндексированных полях 
таблицы расположены в произвольном порядке. 


Для ускорения выполнения запросов применяются индексы (ключи). Индексиро- 
ванные поля всегда поддерживаются в отсортированном состоянии, что позволяет 
быстро найти необходимую запись, не просматривая все записи. Неиндексирован- 
ное поле можно сравнить с книгой без предметного указателя, а индексированное 
поле — с книгой, где он присутствует. Чтобы найти что-либо в первом случае, 
необходимо последовательно перелистывать страницы книги. Во втором случае 
достаточно отыскать нужное понятие по алфавиту в предметном указателе, а затем 
сразу перейти на указанную страницу. 


Необходимо заметить. что применение индексов приводит к увеличению размера 
базы данных, а также к затратам времени на поддержание индекса в отсортирован- 
ном состоянии при каждом добавлении данных. Поэтому индексировать следует 
поля, которые очень часто используются в запросах типа: 


SELECT <Список полей> FROM <Таблица> WHERE <Поле>=<Значение>; 
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Существуют следующие виды индексов: 


О первичный ключ; 
С уникальный индекс; 
О обычный индекс; 


П индекс FULLT] 


ЕХТ. 


Первичный ключ служит для однозн 


це. Для создания индекса предусмотрено ключевое слово PRIMARY КІ 


ачной идентификации каждой записи в табли- 
ку. При созда- 


нии таблицы ключевое слово можно указать после определения параметров поля: 


F 


CREATE TABLE `Cities` 
`id City`ò INT NOT 
`City` VARCHAR (255 


ENGIN 


( 

ULL PRIMARY KI 
) NOT NULL 
E=MyISAM CHARSET=utf8 COLLATI 


или после указания всех полей: 


( 
ULL AUTO ІМСКІ 


F 


CREATE TABLE `Cities` 


`id City` INT NOT 


EY AUTO ІМСКІ 


EM 


ENT, 


F 
г, 


1548 general сі; 


T 


M 


`City` VARCHAR (255) МОТ NULL, 
PRIMARY KEY (`id City`) 
ENGINE=MyISAM CHARSET=utf8 COLLATI 


) 


F 
г, 


utf8 general сі; 


Вторым способом можно создать первичный ключ, состоящий из нескольких полей 
(нужно записать их в скобках через запятую): 


ующую таблицу позволяет ЗОГ.-команда: 


PRIMARY KEY (714 Огаег`, 714 Product`) 
Добавить первичный ключ в существ 
ALTER TABLE <Таблица> ADD PRIMARY KEY 


AUTO INCREMENT 


F 


т 


АГ 


ЕК TABLE <1 


Габлица> DROP PRIMARY КІ 


(<Поле>); 


Удалить первичный ключ позволяет 5ОГ-команда (если для поля указана опция 
г, то вначале нужно удалить эту опцию): 


EY; 


В одной таблице не может быть более одного первичного ключа. А вот обычных и 


уникальных индексов в таблице мож 


определении структуры таблицы с помощью ключевых слов IND 


т 


INDI 


ЕХИ ОМІОО 


KI 


EY ДЛЯ уникального и 
EATE TABLI ( 

`id Customer` INT NOT NULL AUTO 
`Name` VARCHAR (255) NOT NULL, 
`Ааагезз` VARCHAR (255) МОТ NU 
`1а City` INT МОТ NULL, 
`Phone` VARCHAR (255), 

PRIMARY KEY ( 
KEY MyIndex (` 
ENGINE=MyISAM C 


F 


F 


ск 


`Customers` 


LL, 


`id Customer`), 


ame`) 
HARSET=utf8 COLLATI 


ет быть несколько. Создать индекс можно при 
ЕХ и KEY (UNIQUI 


ІН! 


ндекса): 


INCR. 


ЕМІ 


ENT, 


F 
г, 


148 general сі; 
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Индекс может иметь название. Но поскольку название индекса не указывается 
в 501. -запросе, то чаще всего названием индекса служит имя поля. Сервер MySQL 
самостоятельно решает, каким индексом лучше воспользоваться в каждой кон- 
кретной ситуации. Знать название индекса необходимо для его удаления из таб- 
лицы. 


При индексировании текстовых полей следует указать число символов, подлежа- 
щих индексации: 


КЕУ МуТраех (`Маше` (10)) 


ПРИМЕЧАНИЕ 
В большинстве случаев достаточно внести в индекс первые четыре или пять символов. 


Создать обычный индекс позволяют ЗОГ-команды: 


CREATE INDEX <Имя индекса> ОМ <Таблица> (<Поле>(<Число символов>)); 


ИЛИ 
ALTER TABLE <Таблица> 
ADD INDEX <Имя индекса> (<Поле>(<Число символов>)); 


Создать уникальный индекс можно с помощью ЗОГ-команд: 


CREATE UNIQUE INDEX <Имя индекса> 
ON <Таблица> (<Поле>(<Число символов>)); 


ALTER TABLE <Таблица> 
ADD UNIQUE INDEX <Имя индекса> (<Поле>(<Число символов>)); 


Удалить обычный и уникальный индексы позволяют ЗОГ.-команды: 


DROP INDEX <Имя индекса> ОМ <Таблица>; 


ИЛИ 


ALTER TABLE <Таблица> DROP INDEX <Имя индекса>; 


В качестве примера создадим индекс для поля Маме таблицы Customers: 


CREATE INDEX “Мате” ON `Customers`ò (`Name`(5)); 


A теперь сделаем запрос и проверим его эффективность с помошью оператора 
ЕХРТАТМ: 


EXPLAIN SELECT * FROM `Customers` WHERE `Мапе`='Иванов Иван Иванович"; 


Эта команда SQL выведет результат, показанный на рис. 6.2. 
Сравните результат запроса с индексом и предыдуший пример запроса без индекса. 


ВНИМАНИЕ! 


Значение в столбце type уже не равно ALL, а число просмотренных записей равно 1. 
Это означает, что индекс полностью задействован. 
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5О1-запрос успешно выполнен. 


EXPLAIN SELECT * FROM `Сазсошегз` WHERE `Маше`='Иванов Иван Иванович" 


[ Построчное редактирование || Изменить | [ Убрать анализ SQL | [ Результат анализа 
mariadb.org || Создать РНР-код | 


% Параметры 
id select type table type possible_keys key key len ref rows Extra 
Using 


1 SIMPLE Customers ref Name Name 17 const 1 
where 


Индекс FULLT] 


CTO 


Рис. 6.2. Результат, возврашенный командой EXPLAIN, после создания индекса 


в разд. 6.10. 
Получить полную информацию об индексах таблицы позволяет ЗОГ.-команда: 


SHOW INDEX FROM <Таблица> [FROM <База данных>|; 


Например, посмотрим, какие индексы присутствуют в таблице Customers нашей 


баз 


ы данных, для чего наберем команду: 


SHOW INDEX FROM `Customers`; 


Результат показан на рис. 6.3. 


Table Non_unique Key name Seq_in_index Column_name Collation 
customers 0 PRIMARY 1 18 Customer А 
customers 1 Мате 1 Мате А 


Cardinality ЅиЬ рай Packed Null Index type Comment Іпдех соттепі 
3 NULL NULL BTREE 


NULL 5 NULL BTREE 


Рис. 6.3. Результат, возврашенный командой SHOW INDEX 


Рассмотрим столбцы получившейся таблицы и их назначение: 


og 
o 


o 
o 


Table — название таблицы; 


Non unique — 0, если индекс может содержать лишь уникальные значения, 


1 в противном случае; 


Кеу паше -- название индекса. Для первичного — PRIMARY; 


бед іп index — номер последовательности столбцов в индексе, начиная с еди- 


ницы; 


Column пате — название поля; 


Collation — Порядок сортировки значений: А— по возрастанию, NULL — без 


сортировки; 


EXT применяется для полнотекстового поиска. Реализацию полнотек- 
вого поиска и способы создания индекса FULLTEXT МЫ подробно рассмотрим 


Основы MySQL. Работаем с базами данных 793 


п Cardinality — число элементов в индексе; 


п Sub рагі — для строкового поля — число символов, включаемых в индекс, для 
полей прочих типов — всегда NULL; 


0 Packed — способ упаковки индекса или NULL, если индекс не упакован; 


O Null — YES, если индекс может включать значения NULL, и пустая строка B про- 
тивном случае; 


T 


o Index_type — тип индекса. Например, ВТВЕЕ ДЛЯ обычного, FULLTEXT — ДЛЯ MOJN- 
нотекстового; 


O Comment — дополнительные сведения об индексе, выдаваемые самим сервером; 


С Index comment — примечания к индексу, заданные при его создании в ЗОГ-за- 
просе. 


Обратите внимание: в качестве значения столбца Cardinality для индекса Name мы 
получили значение NULL. Может показаться, что в индексе нет элементов. Чтобы 
получить число элементов, необходимо перед использованием оператора SHOW 
INDEX выполнить ЗОГ-команду: 

ANALYZE TABLE <Таблица>; 


6.4.11. Удаление таблицы и базы данных 


Удалить таблицу позволяет 5ОІ.-команда: 


DROP TABLE [ТЕ EXISTS] <Имя таблицы>; 


При попытке удалить несуществующую таблицу сервер выдаст сообщение об 
ошибке. Чтобы исключить такую ситуацию, следует вставить в указанную команду 
слова: IF EXISTS. 


Удалить всю базу данных можно с помощью ЗОГ-команды: 


DROP DATABASE [IF EXISTS] <Имя базы данных»; 


6.5. Доступ к базе данных MySQL 

из РНР-скрипта 

Итак, изучение основ языка SQL закончено. Теперь мы рассмотрим функции и 
методы из библиотеки рпр_тузай.а!, которые позволяют получить доступ к базе 


данных из РНР-скрипта. Чтобы можно было подключиться к MYSQL из скрипта, 
необходимо, чтобы в файле php.ini не было символа комментария (;) перед строкой: 


ехіепѕіоп=рһр mysqli.dll 
ВРНР 7.2 строка имеет следующий формат: 
extension=mysqli 


Библиотека рир_тузай.а! позволяет использовать как процедурный стиль доступа, 
так и объектный. В этом разделе мы рассмотрим оба стиля. 
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6.5.1. Установка соединения 


Установить соединение можно двумя способами: 


бар = mysqli_connect ( [<Имя хоста>[, <Имя пользователя>[, <Пароль>[, 
<База данных>[, <Порт>[, <Сокет>]]]]]]); 
$db = new mysqli ([<Имя хоста>[, <Имя пользователя>[, <Пароль>[, 
<База данных>[, <Порт>[, <Сокет>1111110; 


Все параметры здесь необязательные. Если параметры не указаны, то значения 
берутся из следующих директив в файле php.ini: 

mysqli.default_host= 

mysqli.default_user= 

mysqli.default_pw= 

mysqli.default_port=3306 

mysqli.default_socket= 


Если перед именем хоста указать комбинацию символов p:, то будет открыто по- 
стоянное соединение с сервером MySQL: 


$host = 'p:localhost'; 


Закрыть соединение при процедурном стиле позволяет функция mysqli close (): 


пуѕд1і с1оѕе (<Идентификатор>); 


При объектном стиле используется метод сіозе(): 


<Экземпляр класса>->сіове(); 


Процедурный стиль возвращает идентификатор соединения, а в случае неудачи — 
false. Проверить соединение при ироцедурном стиле можно следующим образом: 
if (@$db = туѕа1і соппесё ('localhost', "коо", '', 'tests')) { 

echo 'Подключение успешно установлено"; 

// Выполняем работу с базой данных 

mysqli_close ($db); // Закрываем соединение 
} 
else { 

echo "Не удалось установить подключение к базе данных:<фг>'; 

echo "ошибка (' . туѕд1і соппесЕ егкро() . ') '; 

echo муза11 соппесе еггог(); 


} 
В этом примере мы воспользовались следующими функциями: 


С mysqli соппесї еггпо() — возвращает код ошибки или значение 0 при отсутст- 
вии ошибки; 

С mysqli соппесї еггог() — возвращает строку с описанием ошибки или пустую 
строку при отсутствии ошибки. 

Проверить соединение при объектном стиле можно следующим образом: 


@$db = new пуза11("Іоса1һозЕ", 'root!', '', 'tests'); 
if (!mysqli_connect_errno()) { 
echo "Подключение успешно установлено"; 
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// Выполняем работу с базой данных 
$db->close(); // Закрываем соединение 
} 
else { 
echo "Не удалось установить подключение к базе данных: <5г>'; 
echo "ошибка (' . шуздіі соппесе еггро() . ') '; 
echo муза11 соппесі еггог(); 
} 


Также можно воспользоваться свойствами соппесе errno (содержит код ошибки 
или значение 0) и connect error (содержит строку с описанием ошибки или пустую 
строку: 
@$db = new пуза11("Іоса1һозЕ", 'root!', '', 'tests'); 
if (!$db->connect_errno) { 
echo "Подключение успешно установлено"; 
// Выполняем работу с базой данных 
$db->close(); // Закрываем соединение 
} 
еізе { 
echo "Не удалось установить подключение к базе данных: <5г>'; 
echo ‘ошибка (" . $db->connect_ errno . ') '; 
echo баю->соппесе еггог; 


6.5.2. Выбор базы данных 


Выбрать базу данных можно при подключении в функции mysqli соппесе() ИЛИ 
в конструкторе класса. 


При процедурном стиле выбор базы данных уже после подключения осуществляет 
функция муза11 зе1есе а (). Формат функции: 


mysqli зе1есе ар (<Идентификатор>, <Имя базы данных>) 


Функция возвращает значение true, если база данных успешно выбрана, И false — 
в случае неудачи: 


if (@$db = mysqli_connect ('localhost', "коо", '')) { 
if (!mysqli_select_db ($db, 'tests')) ( 
echo "Не удалось выбрать базу данных"; 
) 
еізе { 
есһо "Успешно выбрали базу данных"; 
// Выполняем работу с базой данных 
} 
mysqli с1оѕе ($db); 
} 
else { 
echo "Не удалось установить подключение"; 
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При объектном стиле используется метод зе1есе ар (). Формат метода: 


<Экземпляр класса>->зе1есе ар(<Имя базы данных>) 


Пример: 


@$db = new шуза1і ('1оса1ћоѕі!', 'root', '!'); 


if (!5ар->соппесе егкпо) ( 
if (!$db->select_db('tests')) 


{ 


echo "Не удалось выбрать базу данных"; 


} 


еізе { 


есһо 'Успешно выбрали базу данных"; 


// Выполняем работу с базой 
} 
$db->close(); 
} 


else { 


данных 


echo "Не удалось установить подключение'; 


6.5.3. Выполнение запроса к базе данных 


Выполнить запрос к базе данных при процедурном стиле позволяет функция 


mysqli ашегу(). Формат функции: 


mysqli аџегу (<Идентификатор>, <50 


Г-запрос> [, 


$resultmode=MYSQLI STORE RESULT] ) 


ВНИМАНИЕ! 


В конце ЗО! -запроса не следует указывать точку с запятой. 


Функция возвращает идентификатор результата (для запросов типа SELECT), зна- 


чение true или значение false В 


случае ошибки. Для удаления идентификатора 


результата и освобождения используемых ресурсов применяется функция mysqli 


free геѕи1+ (). Формат функции: 


mysqli Ёгее геѕи1ї (<Идентификатор 


результата) 


Получить все записи таблицы Cities позволяет следующий КОД: 


if (@$db = mysqli_connect ('localhost', "коо", '', 'tests')) { 


mysqli_set_charset ($db, 'utf8'); 
if ($res = mysqli _query ($db, 'SELECT * FROM `Сіёіеѕ`')) { 


// Обрабатываем извлеченные 
mysqli _free_result ($res); 
} 
mysqli _ close ($db); 
} 


else { 


записи 


есһо "Не удалось установить подключение к базе данных"; 
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Выполнить запрос к базе данных при обьектном стиле позволяет метод query (). 
Формат метода: 


<Экземпляр класса>->дцегу(<5ОГ-запрос>(, 
Şresultmode=MYSQLI STOR 
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ЕЅО1Т]) 


Метод возвращает экземпляр результата (для запросов типа SELECT), значение true 
или значение false в случае ошибки. Для удаления экземпляра результата следует 
применить методы сіозе(), Ехее() ИЛИ free_result (). Формат метода Егее (): 


<Экземпляр результата>->Етее () 


Получить все записи таблицы Cities позволяет следующий код: 


@$db = пем шуза1і ('1Іоса1ћоѕі', 'гооі!', '', 'tests'); 
if (!5ар->соппесе еггпо) ( 
$db->set_charset ('utf8'); 
if ($res = $db->query('SELECT * FROM `Cities`')) { 

// Обрабатываем извлеченные записи 


$гез->Егее (); 
} 
$db->close(); 
} 
else { 
echo "Не удалось установить подключение к базе данных"; 


} 


Выполнить сразу несколько запросов позволяет функция mysqli multi query() и 
метод multi _query(). В этом случае команды должны быть разделены точкой с за- 
пятой. Форматы: 


mysqli multi аџегу (<Идентификатор>, <5ОІҺ-запросы>) 


<Экземпляр класса>->то1{1 query (<$ОТ-запросы>) 


Для того чтобы записи возвращались в нужной кодировке, следует после подклю- 
чения при процедурном стиле выполнить запрос: 


mysqli ѕеё сһагѕеї ($db, 'ср1251'); // Для кодировки міпдом5-1251 
mysqli веб сһаквек(5ар, 'utf8'); // Для кодировки ОТЕ-8 


или — при объектном стиле: 


бар->зее сһагѕеї ('ср1251'); // Для кодировки міпаом5-1251 
$ар->ѕеё сһагѕеї ('utf8'); // Для кодировки ОТЕ-8 


Можно также отправить ЗОГ.-запрос SET NAMES: 


түздіі аџегу ($db, 'ЗЕТ NAMES ср1251"); // Для кодировки windows-1251 
түздіі аџегу ($96, 'SET NAMES utf8'); // Для кодировки ОТЕ-8 


Получить текущую кодировку можно с помощью функции mysqli character set_ 
пате () или метода character ѕеї папе (): 


echo mysqli_character_set_name ($db); // Процедурный стиль 
echo бар->сһагасбек век папе (); // Объектный стиль 
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6.5.4. Обработка результата запроса 
при процедурном стиле 


Для обработки результата запроса при процедурном стиле используются следую- 
шие функции: 


п mysqli пит rows (<Идентификатор результата>) — возвращает число записей в ре- 
зультате: 
if (@$db = mysqli_connect ('localhost', 'root', '', 'tests')) { 


mysqli_set_charset ($db, 'utf8'); 
if ($res = mysqli _query ($db, 'SELECT * FROM `Сіёіеѕ`')) { 
echo mysqli пот rows ($res) . '<br>'; 


mysqli _free_result ($res); 
} 
mysqli _ close ($db); 
} 
else { 
echo "Не удалось установить подключение к базе данных"; 


} 


п mysqli Е1е1А _ count (<Идентификатор соединения>) — возвращает число полей в ре- 
зультате последнего ЗОГ-запроса: 


if (@$db = mysqli_connect ('localhost', 'root', '', 'tests')) { 
mysqli_set_charset ($db, 'utf8'); 
if ($res = mysqli query ($db, 'SELECT * FROM `Сібіеѕ`')) { 
echo mysqli_field count ($96) . '<br>'; 
mysqli free_result ($res); 


} 
mysqli_close ($db); 


} 
else { 
echo 'He удалось установить подключение к базе данных"; 


} 


п пуѕдіі Ёеїсһ аггау (<Идентификатор результата>[, <Флаг>]) --- возвращает pe- 
зультат в виде списка и (или) ассоциативного массива и сдвигает внутренний 
указатель на следующую запись. Если записей больше нет, возвращается значе- 
ние null. Тип возврашенного результата зависит от необязательного параметра 
<Флаг>, который может принимать следующие значения: 


 МҮ5ОІІ вотн — результат в виде списка и ассоциативного массива (значение 
по умолчанию); 


е MYSQLI NUM — результат в виде списка; 


ө МУЗОГТ ASSOC — результат в виде ассоциативного массива. 
Приведем пример, в котором сочетаются все эти варианты: 


if (@$db = туѕа1і соппесё ('localhost', 'root', '', 'tests')) { 
тувдіі веб сһагѕеї ($db, 'utf8'); 
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if ($res = шуздіі чаегу ($db, 'SELECT * FROM `Сіёіеѕ`')) ( 
while ($row = mysqli_fetch_array ($res)) { 
echo $гом[0] . '- ' . $хом['С16у'] . "<br>"; 


} 
mysqli _free_result ($res); 


if ($res = mysqli _query ($db, 'SELECT * FROM `Сіёіеѕ`')) { 
$гом = mysqli_fetch_array ($res, MYSQLI_ МОМ); 
echo $row[0] . '- ' . $ком[1] . '<br>'; 


$row = mysqli _ fetch array ($res, MYSQLI ASSOC); 
echo $row['id_City'] . ' - ' . $row['City'] . '<br>'; 
mysqli _free_result ($res); 
} 
mysqli_close ($db); 
} 


else { 
echo "Не удалось установить подключение к базе данных"; 


) 

п mysqli ТГессһ гом (<Идентификатор результата>) — возвращает результат в виде 
списка и сдвигает внутренний указатель на следующую запись. Если записей 
больше нет, возвращается null: 


if (@$db = mysqli_connect ('localhost', 'root', '', 'tests')) { 
mysqli_set_charset ($db, 'utf8'); 
if ($res = mysqli _ query ($db, 'SELECT * FROM `Сіёіеѕ`')) { 
while ($row = mysqli_fetch_row($res)) { 
echo $row[0] . '- ' . $хом[1] . '<xbr>'; 


} 
mysqli _ free_result ($res); 
} 
mysqli _ close ($db); 
} 


else { 
echo "Не удалось установить подключение к базе данных"; 


} 


O mysqli Ғеїсһ аѕѕос (<Идентификатор результата>) — возвращает результат в виде 
ассоциативного массива и сдвигает внутренний указатель на следующую запись. 
Если записей больше нет, возвращается null: 


if (@$db = туѕа1і соппесё ('localhost', 'root', '', 'tests')) { 
тувдіі веб сһагѕеї ($db, 'utf8'); 
if ($res = шу5а11 чаегу($А6, 'SELECT * FROM `Сіёіеѕ`')) { 
while ($row = шүздіі Ғеесһ аѕѕос ($геѕ)) { 
есһо $гом["1а Сіёу'] . "- '. Srowl City] . "<br>"; 
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mysqli _free_result ($res); 
} 
mysqli_close ($9); 
} 
else { 
echo "Не удалось установить подключение к базе данных"; 
} 
o mysqli Ёеїсһ орјесі (<Идентификатор результата>) — возвращает результат B BH- 


де объекта и сдвигает внутренний указатель на следующую запись. Если записей 


больше нет, возвращается null: 


if (@$db = mysqli_connect ('localhost', "коо", '', 'tests')) 


mysqli_set_charset ($db, 'utf8'); 
if ($res = mysqli_query ($db, 'SELECT * FROM `Cities`')) 
while ($row = mysqli_fetch_object ($res)) 1 
echo $row->id City . ' - ' . $row->City . '<br>'; 


} 
mysqli _ free_result ($res); 
} 
mysqli _ close ($db); 
} 
else { 
echo "Не удалось установить подключение к базе данных"; 


} 


{ 


{ 


o mysqli дата ѕеек (<Идентификатор результата>, <Смешение>) — перемещает ука- 
затель результата на выбранную строку. Нумерация строк начинается с нуля: 


if (@$db = mysqli_connect ('localhost', 'root', , 'tests')) { 


mysqli_set_charset ($db, 'utf8!'); 

if ($res = mysqli _query ($db, 'SELECT * FROM `Cities`')) 
mysqli data_seek ($res, 1); 
$гом = mysqli_fetch_object ($res); 
echo $row->id City . '- ' . $row->City . '<br>'; 
mysqli _free_result ($res); 

} 

mysqli _ close ($db); 


} 
else { 
echo "Не удалось установить подключение к базе данных"; 


6.5.5. Обработка результата запроса 
при обьектном стиле 


{ 


Для обработки результата запроса при объектном стиле используются следующие 


методы и свойства: 


Основы MySQL. Работаем с базами данных 801 
O num rows — содержит число записей в результате: 
@$db = new пуза11("Іоса1һозЕ", 'root', '', 'tests'); 
if (!$db->connect_errno) { 
$db->set_charset ('utf8'); 
if ($res = $db->query ('SELECT * FROM `Cities`')) { 
echo $res->num rows . '<br>'; 
$res->free(); 
} 
$db->close(); 
} 
else { 
echo "Не удалось установить подключение к базе данных"; 
} 
П fie ld_count — содержит число полей в результате: 
@$db = new пуза11("Іоса1һозЕ", 'root', '', 'tests'); 
if (!5ар->соппесе errno) { 
$db->set_charset ('utf8'); 
if ($res = $db->query('SELECT * FROM `Cities`')) { 
echo $res->field_count '<br>'; 
$res->free(); 
} 
$db->close(); 
} 
else { 
echo "Не удалось установить подключение к базе данных"; 
} 
С fetch аггау( [<Флаг>]) — возвращает результат в виде списка и (или) ассоциа- 


тивного массива и сдвигает внутренний указатель на следующую запись. Если 
записей больше нет, возвращается значение null. Тип возвращенного результата 
зависит от необязательного параметра <Флаг>, который может принимать сле- 
дующие значения: 


МҮ5ОІТ BOTH — результат в виде списка и ассоциативного массива (значение 


по умолчанию); 


МҮ5ОІТ NUM — результат в виде списка; 


МҮ5ОІТ ASSOC — результат в виде ассоциативного массива. 


Следующий пример иллюстрирует все эти варианты: 


@$db = new mysqli ('localhost', 
if (!$db->connect_errno) { 


$db->set_charset ('utf8'); 
if ($res = $db->query (' ЗЕЦ 


"тоой", 


while ($row = $res->fetch агкау()) 


echo $row[0] . = ! 


$гом [ City! ] . '<рг>'; 


, 'tests'); 


ECT * FROM `Cities`')) { 


{ 


, 
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$гез->Егее (); 
} 
if ($res = пшуѕд1і ааегу ($db, 'SELECT % FROM `Сіёіеѕ`')) ( 
$row = $res->fetch аггау(МУЗОШТ МОМ); 
echo $гом[0] . "= ' . $хом[1] . '<хг>!; 
$row = $res->fetch аггау(МУЗОПТ А550С); 
echo $row['id_City'] . '- ' . $хом['С1еу'] . '<br>'; 
$гез->Егее (); 
} 
$А6->с1озе(); 
} 
еізе ( 
есһо "Не удалось установить подключение к базе данных"; 
} 
Тессһ ком (= возвращает результат в виде списка и сдвигает внутренний указа- 


тель на следующую запись. Если записей больше нет, возвращается null: 


@$db = пем пуза11("Іоса1һозЕ", 'root', '', 'tests'); 
if (!5ар->соппесе еггпо) ( 
$db->set_charset ('utf8'); 


if ($res = $db->query('SELECT * FROM `Cities`')) { 
while ($row = $res->fetch гом()) { 
echo $row[0] . '- ' . $row[l] . '<br>'; 


} 
$res->free(); 
} 
$db->close(); 
} 


else { 
echo "Не удалось установить подключение к базе данных"; 


} 

fetch аззос (у= возвращает результат в виде ассоциативного массива и сдвига- 

ет внутренний указатель на следующую запись. Если записей больше нет, воз- 

вращается null: 

@$db = пем пуза11("Іоса1һозЕ", "коов!, '', 'tests'); 

if (!5ар->соппесе еггпо) ( 
$db->set_charset ('utf8'); 


if ($res = $db->query('SELECT * FROM `Cities`')) { 
while ($row = $res->fetch assoc()) { 
есһо $гом["1а City] . "- '. 5гомГСінку"І . '<рг>'; 


} 
$res->free(); 


} 
$db->close(); 
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else { 
echo "Не удалось установить подключение к базе данных"; 


} 


С fetch object () — возвращает результат в виде объекта и сдвигает внутренний 
указатель на следующую запись. Если записей больше нет, возвращается null: 


@$db = new пуза11("Іоса1һозЕ", 'root', '', 'tests'); 
if (!$db->connect_errno) { 
$db->set_charset ('utf8'); 
if ($res = $db->query('SELECT * FROM `Cities`!')) 1 
while ($row = $res->fetch орјесі()) { 
echo $row->id City . ' - ' . $row->City . '<br>'; 


} 
$res->free(); 


} 
$db->close(); 


} 
else { 
echo "Не удалось установить подключение к базе данных"; 


} 


П даға ѕеек (<Смещение>) — перемещает указатель результата на выбранную стро- 
ку. Нумерация строк начинается с нуля: 


@$db = new пуза11("Іоса1һозЕ", 'root!', '', 'tests'); 
if (!$db->connect_errno) { 
$db->set_charset ('utf8'); 
if ($res = $db->query('SELECT * FROM `Cities`')) { 
Şres->data_seek (1); 
$row = $res->fetch object (); 
echo $row->id City . ' - ' . $row->City . '<br>'; 
$res->free(); 


} 
$db->close(); 


} 
else { 
echo "Не удалось установить подключение к базе данных"; 


6.5.6. Экранирование специальных символов 


Функция mysqli кеаі escape_string (<Идентификатор соединения>, <Строка>) В Hpo- 
цедурном стиле и метод real escape_string (<Crpoka>) в объектном стиле экрани- 
руют все специальные символы в строке, учитывая кодировку соединения, и воз- 
вращают строку, которую можно безопасно использовать в 5ОІ.-запросах (лис- 
тинг 6.1). 
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Листинг 6.1. Экранирование специальных символов 


бпем сіёу = "Д'Арк"; // Такие данные передаются из формы 

if (@$db = mysqli_connect ('localhost', "коо", '', 'tests')) { 
mysqli_set_charset ($db, 'utf8'); 
// Экранируем спецсимволы 
$рем сіу = шу5а11 геа1 escape_string (бар, $пем city); 
$query = "INSERT INTO `Cities` VALUES (NULL, '$new_city')"; 
if (!mysqli_query ($db, $адегу)) 1 

echo 'Ошибка: ' . mysqli_error ($db); 


} 
if ($res = mysqli _query ($db, 'SELECT * FROM `Сіёіеѕ`')) { 
while ($row = mysqli_fetch_row($res)) { 
есһо $гом[0] . '- ' . Ѕром[1] . '<фхк>!; 


} 
mysqli _ free_result ($res); 
} 
mysqli _ close ($db); 
} 
else { 
echo "Не удалось установить подключение к базе данных"; 


ВНИМАНИЕ! 


Никогда напрямую не передавайте в ЗО!-запрос данные, полученные из полей фор- 
мы. Это потенциальная угроза безопасности. Всегда применяйте функцию пуза11_ 
real еѕсаре з%г1п9() ИЛИ МЕТОД геа1 езсаре вігіпа(). 


Рассмотрим проблему, возникающую, если не применить функцию mysqli real_ 
escape_string () ИЛИ МЕТОД real езсаре ѕігіпо() для входных данных. 


Создадим таблицу user И добавим в нее две записи: 


CREATE TABLE “изек” ( 

`id_user` ІМТ (9) AUTO INCREMENT, 

`Іодіп` VARCHAR (50), 

`раззм` VARCHAR (32), 
PRIMARY KEY (` іа user` ) 
GINE=MyISAM CHARSET=utf8 COLLATE utf8 general сі; 
INSERT INTO `user VALUES (NULL, 'Admin', 11234); 
INSERT INTO `азехг` VALUES (NULL, 'Nik', '456'); 
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Теперь инсценируем вход злоумышленника в систему под логином администратора 
(листинг 6.2). При этом злоумышленник даже не должен знать его пароль. 


Листинг 6.2. Вход злоумышленника в систему под логином администратора 


<?php 

// Никогда так не делайте!!! 

// Такие данные пришли из формы: 
$_POST['login'] = "' OR ''='"; 
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$ РОЅТ ['раѕѕм'] = "' ОВ ''='"; 

51одіп = $ РОЅТ['10діп']; 

$passw = $ РОЅТ ['раѕзм']; 

if (@$db = туѕа1і соппесё ('localhost', 'root', '', 'tests')) { 
тувдіі веб сһагѕеї ($db, 'utf8!'); 
$query = "SELECT * FROM `џзег` WHERE `login`='$login' "; 
$query .- "AND `раззм`='$раззм'"; 


echo htmlspecialchars ($query) . '<br>'; 
if ($res = mysqli _query ($db, $query)) { 
if (mysqli_num rows ($res) > 0) { 
echo "Полный доступ в систему! !!<рг>'; 
) 
while ($row = пүздіі Ғеёсһ гом($гез)) { 
echo $гом[1] . '<фг>!; 
} 
mysqli _free_result ($res); 
} 
mysqli _ close ($db); 
} 
else { 
echo "Не удалось установить подключение к базе данных"; 


Введя указанные в начале примера строки в форме, злоумышленник получит: 


SELECT % FROM `user` WHERE `1од1п`='' ОВ ''='' AND `раззм`='' ОВ ''='' 
Полный доступ в систему!!! 

Admin 

Nik 


Kak можно видеть, злоумышленник вошел в систему, не зная пароля. В этом при- 
мере, т. к. учетная запись администратора расположена на первой ПОЗИЦИИ, ОН 
вошел под записью администратора — ему просто повезло. А теперь покажем, 
как он войдет в систему именно под учетной записью администратора. Для ЭТОГО 
входящие данные изменим на: 

$_POST['login'] = "Admin'/*"; 

$_POST['passw'] = "*/ '"; 


После выполнения скрипта получим следующий результат: 


SELECT * FROM `џѕег` WHERE `login`='Admin'/*' AND `‘раззм`='*/ '! 
Полный доступ в систему!!! 
Admin 


Как видно из результата, он является администратором. Все, что расположено меж- 
ду /* и */ — это комментарий. В итоге 5ОГ-запрос будет выглядеть так: 


SELECT * FROM `а5ехг` WHERE `login`='Admin' '' 


Пароль в данном случае вообше не проверяется. Таким образом, достаточно знать 
Логин пользователя и можно войти без пароля! 
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При обработке данных функцией mysqli real escape string() или методом 
real escape_string () такого бы не случилось 


$10910 = шу5а11 геа1 escape_string ($db, $10911); 

Şpassw = mysqli геа1 escape_string ($db, $раззм); 

$query = "SELECT * FROM `азег` WHERE `10одіп`='$10одіп' "; 
$query .= "AND `passw`='$passw'"; 


echo htmlspecialchars ($query) . '<5х>!; 


B первом случае скрипт выведет только: 


| 


SELECT * FROM `азег` WHERE `10одіп`='\' ОВ \'\'=\'! 


D `раѕѕи`='\' ОК \'\'=\'' 


А 
А во втором: 


SELECT * FROM `азег` WHERE `1одіп`='Аатіп\'/*' AND `раззм`='*/ \'' 


В результате все опасные символы были экранированы. 


ПРИМЕЧАНИЕ 


Выводить код SQL напрямую в У/ер-страницу также не рекомендуется, т. к. это дает 
злоумышленнику информацию о структуре базы данных. 


6.6. Транзакции 


При работе с базами данных очень часто бывает необходимо выполнять какие-либо 
сложные действия, включающие несколько операций по добавлению, изменению и 
удалению записей. И эти операции обязательно должны быть либо выполнены все 
и полностью, либо, если в процессе их обработки произойдет сбой, не выполнены 
все и полностью, — в противном случае нарушится целостность данных, храня- 
щихся в базе. Например, при выписывании расходной ведомости товар списывает- 
ся со склада. Если во время списания произойдет ошибка, то расчетная ведомость 
будет сформирована, а товар со склада списан не будет. Чтобы гарантировать 
успешное выполнение группы запросов, используется механизм транзакций. 


ВНИМАНИЕ! 


Следует учитывать, что транзакции поддерживаются только таблицами, имеющими 
ТИП InnoDB. Таблицы типа MyISAM транзакции не поддерживают. 


Давайте создадим в базе данных tests две таблицы: первая (іпу чооаѕ) — будет 
хранить список товаров и их количество, имеющееся на складе, а вторая 
(іпу спѕ) — список расходных ведомостей, документирующих передачу товаров со 
склада заказчикам: 


CREATE TABLE `іпу дооаѕ` ( 
`id_good` INT NOT NULL AUTO INCREMENT, 
`name` VARCHAR (10), 
`соџпі` SMALLINT, 
PRIMARY KEY (`1а дооа`) 
) ЕМСІМЕ=Іппорв CHARSET=utf8 COLLATE 148 general сі; 


T 
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CREATE TABLE `іпу спѕ` ( 
Хі4 сп” INT МОТ NULL AUTO INCREMENT, 
`id_good` INT, 
`count`ò SMALLINT, 


т 


PRIMARY KEY (іа сп”), 
FOREIGN KEY (`іа дооа”) REFERENCES `1пу дооав” (714 дооа`) 
ОМ DELETE CASCADE ОМ UPDATE CASCADE 

) ЕМСІМЕ-ІппорВ CHARSET=utf8 COLLATE utf8_ general сі; 


Добавим пару записей в таблицу inv goods: 


INSERT INTO `іпу goods VALUES (NULL, "Мыло", 20); 
INSERT INTO `inv_goods` VALUES (NULL, 'Шило!, 10); 


6.6.1. Автозавершение транзакций и его отключение 


По умолчанию каждая операция запускается в составе транзакции, даже если мы не 
указали это явно. Такие создаваемые по умолчанию транзакции подтверждаются 
автоматически (автозавершение транзакций): 


/* Запускается транзакция по умолчанию */ 
SELECT * from `1пу_90095`; 


/% Транзакция по умолчанию подтверждается */ 

/* Запускается транзакция по умолчанию */ 

INSERT INTO `іпу goods VALUES (NULL, "'Молоток', 5); 
/* Транзакция по умолчанию подтверждается */ 


Как видим, это относится, в том числе, и к операциям выборки данных. 
Управлять автозавершением транзакций позволяют следующие 5ОГ-команды: 


С SET autocommit=0; — отключает автозавершение транзакций. В этом случае мы 
должны явным образом подтвердить (COMMIT) или откатить изменения (ROLLBACK): 


SET autocommit=0; 
ж 


/ 


о 


Автозавершение транзакций отключено */ 


INSERT INTO `іпу goods VALUES (NULL, "Швабра", 12); 
/% Выполняем завершение транзакции */ 
СОММІТ; 
П SET autocommit=1; — включает автозавершение транзакций; 
С SELECT @Qautocommit; — позволяет узнать текущий статус автозавершения тран- 
закций. 


6.6.2. Запуск, подтверждение и отмена транзакций 


Управлять транзакциями позволяют следующие ЗОГ.-команды: 


С START TRANSACTION — запускает транзакцию. Все операции выборки, добавления, 
изменения и удаления записей, следующие после этой команды, будут выпол- 
няться в составе транзакции. После явного запуска транзакции автозавершение 
временно отключается до вызова COMMIT или ROLLBACK. 
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Вот пример запуска транзакции: 

START TRANSACTION; 

После ключевых слов START TRANSACTION MOTYT быть указаны следующие конст- 
рукции: 


Ф WITH CONSISTENT SNAPSHOT — создать «снимок» данных непосредственно при 
запуске транзакции; 


© READ WRITE 


чтение и запись; 


Ф READ ОМҺҮ-- ТОЛЬКО чтение; 


COMMIT — подтверждает транзакцию и завершает ее. При получении этой коман- 
ды сервер выполняет все команды изменения записей, что находились между 
ней и предыдущей командой запуска транзакции, и подтверждает все сделанные 
этими командами изменения. 


Вот пример подтверждения транзакции: 


COMMIT; 


ROLLBACK — отменяет все изменения в рамках транзакции и завершает транзак- 
цию (выполняет откат транзакции). 

Вот пример отката транзакции: 

ROLLBACK; 

После ключевых слов COMMIT и ROLLBACK могут быть указаны следующие конст- 
рукции: 


COMMIT [AND [NO] CHAIN] [[NO] RELEASE] 
ROLLBACK [AND [NO] CHAIN] [[NO] RELEAS 


тј se 


17 


AND СНАТМ--- новая транзакция начинается, как только текущая заканчивается. 
Новая транзакция будет иметь точно такой же уровень изоляции и режим досту- 
па (READ WRITE ИЛИ READ ОМГУ); 


О] Амр мо CHAIN — отключает CHAIN; 
О RELEASE — текущий сеанс клиента отключается после завершения транзакции; 
О хо RELEASE — отключает RELEASE. 


Узнать режим по умолчанию позволяет системная переменная completion type: 


5 


EI 


ECT @@completion type; 


/* Выведет: NO CHAIN */ 


Выясним, какой идентификатор получил товар «Мыло»: 


5 


EL 


ECT `id дооа” FROM `іпу дооаѕ` WHERE `паще` = 'Мыло'; 


/% Выведет: 1 */ 


Теперь давайте попробуем выписать расходную ведомость на отпуск трех единиц 
этого товара. Для этого нам придется: 


С добавить в таблицу inv cns запись, представляющую саму расходную ведо- 


мость; 
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п уменьшить значение ПОЛЯ count таблицы іпу дооаз на три, чтобы показать 
уменьшение хранящегося на складе товара. 


Поскольку обе эти операции обязательно должны быть выполнены все и полностью 
(в противном случае, если случится сбой, мы получим недостачу товара на складе), 
мы заключим их в транзакцию и не забудем подтвердить ее: 


START TRANSACTION; 

INSERT INTO `іпу спѕ` VALUES (NULL, 1, 3); 

UPDATE `inv_goods`ò SET `count`=`count>-3 WHERE 7142 дооа`=1; 
COMMIT; 


Посмотрим содержимое таблицы ілу cns: 


SELECT % FROM Сіпу сп”; 


Мы УВИДИМ, ЧТО В таблице появилась одна запись — представляющая только что 
выписанную нами расходную ведомость. 


Проверим, произошла ли выдача товара со склада: 


SELECT `count`ò FROM `іпу дооаѕ` WHERE `пате`="Мыло'; 
/* Выведет: 17 */ 


Kak видим, товар был успешно выдан. 


Предположим, ЧТО МЫ собирались выписать расходную ведомость на две единицы 
товара «Шило», но в последний момент передумали и решили отменить выдачу, 
выполнив откат транзакции: 


START TRANSACTION; 

SELECT @іпу 14:-Гіа дооа` FROM `іпу дооаѕ` WHERE `пате `='Шило!'; 
INSERT INTO `іпу спѕ` VALUES (NULL, @іпу іа, 2); 

UPDATE `іпу доо4в” SET `соџпі `=`соџпі`-2 WHERE 714 одооа`=@іпу іа; 
ROLLBACK; 


Е 


В этом случае все операции, заключенные в транзакцию, не будут выполнены. 
В чем мы убедимся, просмотрев содержимое таблиц іпу goods И іпу спэ. 


Отметим, что в последнем примере для временного хранения идентификатора 
товара, выдаваемого со склада, мы использовали переменную SQL. 


Если в процессе обработки включенных в состав транзакции команд возникнет 
ошибка, то эту ошибку вы должны обработать в программе и явным образом 
откатить транзакцию с помощью команды ROLLBACK. Не стоит надеяться на то, 
что команды отменятся автоматически. Если команды выполнить в программе 
phpMyAdmin, то при ошибке откат будет выполнен, но если не предусмотреть об- 
работку ошибок в своей программе, то никакого отката сделано не будет! Напри- 
мер, закомментируйте все инструкции throw в листинге 6.3 и добавьте ошибку 
в название поля (например, іа доо42) в команде UPDATE. В результате расходная 
ведомость будет сформирована, а вот списания товара со склада не произойдет! 


Следует также учитывать, что внутри транзакции можно без проблем работать 
с командами SELECT, INSERT, UPDATE И DELETE, но Другие команды либо невозможно 
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откатить, либо они подтверждают транзакцию автоматически. Например, команду 
DROP TABLE нельзя откатить, а команда CREATE TABLE неявно завершает транзак- 
цию, как если бы была вызвана команда COMMIT. Поэтому такие команды лучше 
вынести за рамки транзакции, иначе выполнить откат других команд, возможно, не 
получится. 


6.6.3. Изоляция транзакций 


Поскольку к базе данных MySQL одновременно могут подключаться сразу 
несколько пользователей, в ней могут выполняться сразу несколько транзакций, 
запущенных разными пользователями. И эти транзакции могут изменять содержи- 
мое одной и той же таблицы. 


Введение в изоляцию транзакций 


В связи с этим возникает вопрос: как сделанные в таблице изменения отслежива- 
ются командами SELECT, находящимися в составе транзакции? В этом случае 
MySQL соблюдает следующие правила: 


o при выполнении первой команды SELECT, присутствуюшей в транзакции, в памя- 
ти компьютера создается своего рода «снимок» данных, являющихся актуаль- 
ными на момент выполнения этой операции. Все последующие команды SELECT, 
что включены в транзакцию, оперируют именно этим «снимком»; 


O «снимок» отслеживает все действия команд INSERT, UPDATE И DELETE, Находящих- 
ся в той же транзакции, где он был создан, 


П действия команд INSERT, UPDATE и DELETE, присутствующих в других транзакциях, 
«снимок» не отслеживает. 


Как видим, каждая транзакция работает со своей копией данных. Такой подход 
называется изоляцией транзакций. 


Если в транзакции присутствует команда выборки данных SELECT, ее рекомендуется 
поставить самой первой, непосредственно после команды START TRANSACTION. 
В этом случае «снимок» данных будет создан сразу же после запуска транзакции. 


Как вариант, можно использовать команду START TRANSACTION WITH CONSISTENT 
SNAPSHOT — она тоже указывает MySQL создать «снимок» данных непосредственно 
при запуске транзакции: 


START TRANSACTION WITH CONSISTENT SNAPSHOT; 
/% Ҡоманды транзакции */ 
COMMIT | ROLLBACK; 


Уровни изоляции транзакций 


MySQL поддерживает четыре уровня изоляции транзакции, характеризующих 
степень доступности таблиц, вовлеченных в транзакцию, для других транзакций, 
которые запущены параллельно с текущей. Для указания уровня изоляции приме- 
няется команда SET TRANSACTION ISOLATION LEVEL: 


5 
В 
5 


ЕТ [GLOBAL | SESSION] TRANSACTION ISOLATION LEVEL 
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ЕРЕАТАВІЕ READ | READ COMMITTED | READ ОМСОММІТТІ 


БІ 
о 


ERIALIZABLE 


Рассмотрим все доступные нам уровни изоляции транзакций (в порядке увеличения 
степени надежности): 


С] READ ОМСОММТТТЕР — транзакции не изолированы друг от друга, и команда SELECT 


может прочитать данные, в которые были внесены изменения параллельно рабо- 
тающими транзакциями. Вследствие этого может возникнуть ситуация, когда 
одна транзакция может прочитать данные, измененные другой транзакцией, по- 
сле чего — в случае отката последней — первая транзакция будет оперировать 
данными, которых фактически нет в таблице. Самый низкий уровень изоляции; 


READ COMMITTED — каждая команда SELECT в транзакции создает свой собствен- 
ный «снимок» данных, которым и оперирует. Транзакции изолированы друг от 
друга; 


REPEATABLE READ — первая команда SELECT в транзакции создает «снимок» дан- 
НЫХ, который используется всеми последующими командами такого же типа. 
Транзакции изолированы друг от друга. Это уровень изоляции по умолчанию; 


SERIALIZABLE ПОХОЖ На REPEATABLE READ, НО, ЕСЛИ автозавершение транзакций 


В большинстве случаев уровень изоляции REPEATABLE 


отключено, каждая команда SELECT временно блокирует таблицы, из которых 
выбирает данные, с тем, чтобы никакая другая транзакция не смогла получить 
к ним доступ. Самый надежный уровень изоляции, но при этом самый медлен- 
НЫЙ. 


ж 


EAD, используемый по умол- 


чанию, является лучшим выбором: 


51 


ЕТ TRANSACTION ISOLATION LEVEL READ COMMITTED; 


START TRANSACTION; 
/* Ҡоманды транзакции */ 
COMMIT; 


Kpome того, мы можем указать, на какие транзакции будет распространяться дейст- 
вие команды SET TRANSACTION ISOLATION LEVEL: 


O если не указаны ключевые слова GLOBAL И SESSION, действие команды распро- 


странится лишь на следующую транзакцию. Все транзакции, запущенные после 
нее, получат уровень изоляции по умолчанию: 


SET TRANSACTION ISOLATION LEVEL READ COMMITTED; 

START TRANSACTION; 

/* Эта транзакция использует уровень изоляции READ COMMITTED */ 
СОММІТ; 
START TRANSACTION; 

/* Эта транзакция будет запущена с уровнем изоляции 
по умолчанию - REPEATABLE READ */ 

СОММІТ; 
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П если указано ключевое слово SESSION, действие команды распространится на все 
транзакции, запущенные в течение текущей сессии; 


С если указано ключевое слово GLOBAL, действие команды распространится на все 
транзакции, запущенные в течение текущей и последующих сессий. 


6.6.4. Именованные точки сохранения 


Внутри транзакции можно создать именованную метку, называемую точкой сохра- 
нения. Для этого предназначена команда SAVEPOINT: 


ЗАУЕРОТМТ <Метка>; 


Если транзакция уже имеет точку сохранения с указанным именем, то старая точка 
удаляется и устанавливается новая. 


l 


Для удаления точки сохранения предназначена команда RELEASI 


RELEASE SAVEPOINT <Метка>; 


При этом не происходит подтверждение или откат. Все точки сохранения удаляют- 
ся при завершении транзакции с помощью COMMIT ИЛИ ROLLBACK без указания метки. 


Чтобы отменить изменения, выполненные После метки, используется команда 
ROLLBACK: 


ROLLBACK TO SAVEPOINT <Метка>; 


Пример: 


START TRANSACTION; 

SAVEPOINT МуТаре1 1; 

INSERT INTO `inv goods VALUES (NULL, "Вешалка", 15); 
SAVEPOINT MyLabel 1; 
SAVEPOINT МуТаре1 2; 
INSERT INTO `inv_goods` VALUES (NULL, "Порошок", 20); 
ROLLBACK TO SAVEPOINT MyLabel 2; 

/* Будет добавлена только вешалка */ 

СОММІТ; 


1 


т) 
а 
D 
о 
т] 


6.6.5. Блокировка таблиц и строк 


Итак, мы научились выполнять группу команд как единое целое в составе транзак- 
ции. Однако, пока мы запрашиваем количество товара на складе, параллельно ана- 
логичное действие может совершать и другой процесс. Представьте: два процесса 
видят пять единиц товара и одновременно оформляют расходные ведомости на это 
количество и списывают товар со склада. В итоге количество товара на складе 
станет отрицательным. Как успеть списать товар раньше, чем его успеет списать 
параллельный процесс, и при этом не дать этому процессу списать то, чего уже 
нет? Для этого нужно воспользоваться блокировками. Таблицы типа InnoDB под- 
держивают блокировки на уровне таблиц и строк. 
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Блокировка отдельных таблиц осуществляется с помощью команды LOCK TABLES, а 
снять блокировку позволяет команда UNLOCK TABLES. Блокировку можно установить 
только на чтение (READ) или на чтение и запись (WRITE). При работе с транзакциями 
следует учитывать, что эти команды автоматически завершают текущую транзак- 
цию. Поэтому вместо команды START TRANSACTION следует отключить автоматиче- 
ское завершение транзакций: 


ЕТ autocommit=0; 

ОСК TABLES `іпу дооаѕ` WRITE, `inv_cns` WRITE; 
Г @іпу 1а:=`1а good) FROM `іпу дооаѕ` WHERE “папе”-"Мыло"; 
SERT INTO `іпу спѕ` VALUES (NULL, @1пу іа, 2); 

“іпу дооаѕ` SET `соцпе`=`соирЕ`-2 WHERE `іа дооа`=@іпу іа; 


т] 
т] 
о 
2 


п. 
, 


о 
я 


LOCK TABLES; 
ET autocommit=1; 


осао санын оғ о 
go] 
(>) 
D 
H 
E 


Блокировка таблиц может заметно сказаться на производительности -- ведь другие 
процессы будут ждать снятия блокировки. В нашем случае более правильно будет 
использовать блокировку на уровне строк. Для этого после команды SELECT нужно 
добавить конструкцию FOR UPDATE. В этом случае будут заблокированы только 
строки, которые возвращает эта команда. Блокировка снимается при завершении 
транзакции: 


START TRANSACTION; 

SELECT @іпу 149:=`1А дооа” FROM `inv_goods` 

WHERE `папе`='Мыло' LIMIT 1 FOR UPDATE; 

INSERT INTO `іпу спѕ` VALUES (NULL, @іпу іа, 2); 

UPDATE `іпу дооаѕ` SET `count`=`count>-2 WHERE `id одооа`=6@іпу іа; 
COMMIT; 


ПРИМЕЧАНИЕ 


В этих примерах мы не проверяем количество товара на складе только для упрошения 
их демонстрации. На практике это нужно делать обязательно. Кроме того, редко ис- 
пользуется выборка по наименованию товара, практически всегда указывается уни- 
кальный идентификатор товара в таблице. 


Иногда нужно не изменять значение в поле, а просто иметь гарантию, что при до- 
бавлении записи в другую таблицу евязанная запись из первой таблицы не будет 
удалена параллельным процессом. Для этого после команды SELECT НУЖНО добавить 
конструкцию LOCK ІМ SHARE MODE. В этом случае будут заблокированы для измене- 
ния только строки, которые возвращает эта команда. Блокировка снимается при 
завершении транзакции. 


Давайте добавим в базу данных tests еше одну таблицу с какой-нибудь дополни- 
тельной информацией о товаре из таблицы 1пу_доодз: 
CREATE TABLE ` inv_info` ( 
`id_info` INT NOT NULL AUTO INCREMENT, 
`id_good` INT, 
`text_info` TEXT, 
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PRIMARY KEY (1а іпғо` № 
FOREIGN KEY (`іа дооа”) REFERENCES `1пу дооаѕ` (`1а дооа`) 
ОМ DELETE CASCADE ОМ UPDATE CASCADE 

) ЕМСІМЕ-ІппорВ CHARSET=utf8 COLLATE 048 general сі; 


Теперь добавим новую запись в таблицу, при этом обеспечивая ссылочную целост- 
ность с существующим товаром: 


START TRANSACTION; 

SELECT @іпу 149:=`1А дооа” FROM `inv_goods` 
WHERE ‘пате `='Мыло!' LIMIT 1 LOCK IN SHARE MODE; 
INSERT INTO `inv_info`ò VALUES (NULL, @іпу іа, "Отличное мыло"); 
COMMIT; 


6.6.6. Поддержка транзакций 
библиотекой рАр_ту$а/.а! 


Для управления транзакциями при ироцедурном стиле в библиотеке рпр_тузай. а! 
предназначены следующие функции: 


п mysqli begin transaction (<Идентификатор>[, <Флаг>[, <Метка>]]) -- запускает 
транзакцию. В параметре <Флаг> МОЖНО указать константы МҮБОТІ ТКАМ5 ЅТАҺТ 


READ WRITE, МҮЅОШІ TRANS START READ ONLY ИЛИ МУЗОГТ TRANS START WITH CONSISTENT _ 
SNAPSHOT; 

o mysqli _ commit (<Идентификатор>[, <Флаги>[, <Метка>11) — подтверждает тран- 
закцию; 

п пуза11 ко11раск (<Идентификатор>[, <Флаги>[, <Метка>]]) -- отменяет транзак- 
ЦИЮ. 


В параметре <Флаги> В функциях mysqli соптіс() И mysqli_rollback() МОЖНО 
указать константы МҮЗОІІ ТВАМ$ СОК ВЕТЕАЗЕ, МҮЗОІІ ТВАМ$ СОК МО RELEASE, 
MYSQLI TRANS COR AND CHAIN И MYSQLI TRANS COR AND МО CHAIN; 


i 
ЕЗ 


п mysqli аџіосотютії (<Идентификатор>, <true | Ға1ѕе>) — включает (true) ИЛИ OT- 
ключает (false) автозавершение транзакций. 


При объектном стиле используются следующие методы: 


О begin transaction ([<Флаг>[, <Метка>11) — запускает транзакцию. В параметре 
<Флаг> можно указать константы MYSQLI TRANS ЅТАВТ ВЕАР WRITE, МУЗОГТ ТВАМ$ _ 
ЗТАВТ ВЕАР ОМГУ ИЛИ MYSQLI ТВАМЗ СТАВТ МІТН СОМЗТУТЕМТ $МАРЗНОТ; 


П comit ([<Флаги>[, <Метка>11) — подтверждает транзакцию; 
С гопьаск([<Флаги>[, <Метка>11) — отменяет транзакцию. 


В параметре <Флаги> в методах commit () И rollback () можно указать константы 
МУЗОГТ ТВАМ$ СОК RELEASE, МУЗОГТ ТКАМ5 СОК МО RELEASE, МУЗОГТ TRANS СОК AND CHAIN 
И MYSQLI TRANS COR AND МО CHAIN; 


С autocommit(<true | false>) — включает (true) или отключает (false) автоза- 
вершение транзакций. 
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Пример обработки ошибок в рамках транзакции, приведен в листинге 6.3. 


Листинг 6.3. Управление транзакцией при процедурном стиле 


6с 2% // Требуемое количество 
біпу id = 1; // ID товара 
if (@$db = mysqli_connect ('localhost', 'root', '', 'tests')) { 
mysqli_set_charset ($db, 'utf8'); 
mysqli_query ($db, 
'SET TRANSACTION ISOLATION LEVEL REPEATABLE READ'); 
mysqli _ begin transaction ($db, 


MYSQLI ТВАМ$ 5ТАКТ ИТТН СОМ515ТЕМТ SNAPSHOT) ; 
541 = "SELECT `соџпё` FROM `inv_goods`ò "; 
541 .= "WHERE `id good`={$inv_id} FOR UPDATE"; 
$q2 = "INSERT INTO `inv_cns` VALUES (NULL, біпу іа, 5с)"; 
$93 = "UPDATE `іпу дооаѕ` SET `соџпі `=`соцпё`-{$с}) "; 
$93 .= "WHERE `1а дооа`={$іпу іа)"; 
ку 


if ($res = mysqli_query ($db, 541)) 1 
if (mysqli пит rows ($res) != 1) { 
mysqli _free_result ($res); 


throw new \Exception ("Не одна запись"); 
} 
$row = mysqli_fetch assoc ($res); 
$count = intval($row['count'] ?? 0); 
if ($count < $c) { 
mysqli _free_result ($res); 


throw new \Exception ("Недостаточно товара"); 


} 


mysqli_free_result ($res); 


else throw new \Exception (муѕд1і еггог($ар)); 
if (!mysqli_query ($db, $q2)) 1 
throw new \Exception (mysqli_error ($db) ); 


if (!mysqli_query ($db, $q3)) { 
throw new \Exception (mysqli_error ($db) ); 


if (mysqli commit ($db)) { 
echo "Транзакция успешно подтверждена"; 


else throw new \Exception (mysqli_error ($db) ); 


} catch (\Exception $e) { 
echo "Ошибка: ' . $e->getMessage (); 
mysqli rollback ($db); 
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mysqli_close ($db); 
} 


else { 
echo "Не удалось установить подключение к базе данных"; 


6.7. Операторы MySQL 


Операторы позволяют выполнить с данными определенные действия. Например, 
математические операторы предназначены для арифметических вычислений. Рас- 
смотрим операторы, доступные в MySQL. 


Выполнять ЗОГ-команды мы будем в программе MySQL Command Line Client, а 
точнее — в ее аналоге MariaDB Command Line Client. Программа является KOH- 
сольной, поэтому запускаем приложение Командная строка и переходим в каталог 
C:\xampp\mysql\bin: 


С: \Users\Unicross>cd C:\xampp\mysql\bin 


С: \хатрр \пуза1 \bin> 


Консоль по умолчанию работает с кодировкой windows-866. Чтобы убедиться 
в этом, набираем команду: 


С: \хатшрр\шуза1 Біп>сһср 
Текущая кодовая страница: 866 


Мы собираемся работать с кодировкой ууіп4оуу5-1251, поэтому набираем такую 
команду: 


С: \xampp\mysql\bin>chcp 1251 
Текущая кодовая страница: 1251 


Если в последней строке русские буквы исказились, то нужно сменить шрифт. Для 
этого щелкаем правой кнопкой мыши на заголовке окна и из контекстного меню 
выбираем пункт Свойства. В открывшемся окне переходим на вкладку Шрифт и 
в списке Шрифт выбираем пункт Lucida Console. В списке Размер выбираем 
пункт 12. Нажимаем кнопку ОК. 


Запускаем программу с помощью команды: 
mysql -u root -p 
Программа выведет запрос на ввод пароля. Мы не задавали пароль для пользовате- 


ЛЯ root, поэтому просто нажимаем клавишу <Ещег>. В случае успешного входа 
отобразится приветствие сервера, и программа перейдет в режим ожидания команд: 


С: \хашрр\муза1 \Б1лп>туза1 -u root -p 
Enter password: 


Welcome to the MariaDB monitor. Commands end with ; or \g. 
Your MariaDB connection id is 12 
Server version: 10.1.29-MariaDB mariadb.org binary distribution 
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Copyright (с) 2000, 2017, Oracle, MariaDB Corporation Ab апа others. 


Туре 'help;' or "АҺ! for help. Туре '\с' to clear the current input 
statement. 


MariaDB [(none)]> 


Слово none внутри скобок говорит о том, что база данных не выбрана. Выбираем 
базу данных tests: 


MariaDB ((попе)|> USE `tests`; 
Database changed 
MariaDB [tests]> 


Давайте сразу зададим кодировку соединения: 


MariaDB [tests]> SET NAMES ср1251; 
Query OK, 0 rows affected (0.00 sec) 


Каждая команда должна завершаться точкой с запятой. Если не указать точку с за- 
пятой и нажать клавишу <Ещег>, то программа выведет приглашение для продол- 
жения ввода команды ->. 

В качестве примера выведем содержимое таблицы Cities: 


MariaDB [tests]> SELECT * 
-> FROM `Cities`; 


осква 


3 rows іп set (0.00 sec) 


Если вместо точки с запятой указать комбинацию \G, то результат будет выведен 
не в виде таблицы, а в виде списка: 


MariaDB [tests]> SELECT * FROM `Cities`\G 


ххххххххххххкхххххкхххххххккх T row ХХХ ХХХ ХХХ Хе 


іа Сіёу: 1 
City: Санкт-Петербург 
ххххххххххххххххххххххххххх ды row ЖЖЖЖ ЖЖК КККК К К К К К КК К Ж К К К С 
іа Сіёу: 2 
City: Москва 
ххххххххххххххххххххххххххх 3 row ЖЖЖЖ ЖЖК КККК К К К К К КК К Ж К К К С 
іа Сіёу: 3 
City: Д'Арк 
3 rows іп set (0.00 sec) 


Для завершения работы программы нужно ввести команду: 


QUIT; 
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6.7.1. Математические операторы 


Приведем список математических операторов: 
П + — сложение: 


SELECT 8 + 5; 


O - — вычитание: 


SELECT 10 - 5; 


О * — умножение: 


SELECT 10 * 5; 


O /— деление: 


SELECT 10 / 5; 
/* Выведет: 2.0000 */ 


O DIV — целочисленное деление: 


SELECT 10 DIV 5; 
/ж Выведет: 2 */ 
SELECT 10 DIV 3; 
/% Выведет: 3 */ 


П зи мор — остаток от деления: 


ЕҺЕСТ 10 % 2; 
* Выведет: 0 */ 
ECT 9 % 2; 
% Выведет: 1 */ 
ELECT 10 MOD 2; 
/ж Выведет: 0 */ 


о М 92 М 9 
т] 


Вместо операторов % и мор можно использовать функцию МОР (): 


SELECT МОр (10, 2); 
/% Выведет: 0 */ 


Следует отметить, что если один из операндов равен NULL, то результат операции 
также будет равен NULL. В отличие от языков программирования, деление на ноль 
здесь не приводит к генерации сообщения об ошибке, — результатом операции 
деления на ноль является значение NULL: 

SELECT 10 * NULL; 

/% Выведет: NULL */ 

ЕСТ 10 / 0; 
/% Выведет: NULL */ 
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Если необходимо сменить знак числа, то перед операндом следует указать символ - 
(минус): 


SELECT -(-5); 
/% Выведет: 5 */ 
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В качестве примера рассмотрим возможность подсчета переходов по рекламной 


ссылке. Для этого создадим таблицу counter в базе данных tests: 


СВЕАТЕ 


TABLE 


`id link` 
`total` І 
PRIMARY KEY (`id link`) 
ET=utf8 COLLATE 


) E 


GI 


INT 
T, 


OT 


`соџпіёег ` 


NE=MyISAM CHARS] 


( 
ULL AUTO INCREMENT, 


T 


Затем добавим одну запись: 


INSERT ІМТО 


`counter` 


VALUES 


(1, 0); 


utf8 general сі; 


Для подсчета переходов в тексте ссылки укажем идентификатор в базе данных и 
ОВГ-адрес: 


<a href="go.php?id=1&amp; url=http: / /ммм.ма11.га/">Перейти</а> 


Переходы регистрируются в файле go.php. Исходный код файла приведен в листин- 


ге 6. 


4. 


Листинг 6.4. Регистрация переходов по ссылке 


<?php 


if (!isset($_GET 

$id = intval($ СЕТ['1а']); 
($id > 0) { 
if (@$db = mysqli connect ('localhost', 


TE 


} 


mysqli ѕеє сһагѕе+ ($db, 


$query = 'ОРРАТ! 
"НЕК: 


(41411) 


F 
E 
Б 


$query .= 


"ПЕРЕ т) 
`counter` SET `total` 
“із Ііпк`=' . 614; 


@пуза11 амегу(5ар, балегу); 
mysqli_close ($db); 


header ('Location: ' 


exit(); 


Іш 


$ СЕТ ['0г1!']); 


ІіѕѕеЁ ($ СЕТ ['0р1'])) 


ОО: 135 


= `total` 


'tests')) 


+ 


ni 


die ('Ошибка'); 


, 


{ 


Оператор + позволяет увеличить счетчик за один запрос. Иначе пришлось бы вна- 
чале получить значение из базы данных, затем увеличить его и только во втором 
запросе обновить значение в базе данных. 


6.7.2. Побитовые операторы 


Приведем список побитовых операторов: 


О - — двоичная инверсия; 


O = — двоичное и: 


5 


/* Выведет: 


EL 


ECT BIN(100 & 75); 
1000000 */ 
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O |-- двоичное или: 


SELECT ВІМ(100 | 75); 
/% Выведет: 1101111 */ 


O ^ — двоичное исключающее или: 


SELECT ВІМ(100 ^ 250); 
/% Выведет: 10011110 */ 


О << — сдвиг влево на один или более разрядов с заполнением младших разрядов 
нулями: 


SELECT ВІМ (100 << 1); 
/% Выведет: 11001000 */ 


С >> — сдвиг вправо на один или более разрядов с заполнением старших разрядов 
содержимым самого старшего разряда: 


SELECT ВІМ(100 >> 1); 

/* Выведет: 110010 */ 

SELECT ВІМ(-127 >> 1); 

/* Выведет: 
111111111111111111111111111111111111111111111111111111111000000 
ж/ 


6.7.3. Операторы сравнения 


Операторы сравнения используются, прежде всего, в конструкциях WHERE И HAVING 
при создании запросов. Приведем их список: 


IS МОТ NULL — проверка на наличие значения; 


IS NULL — проверка поля на отсутствие значения; 


О = — равно; 

О <=> — эквивалентно; 

О != — не равно; 

О <> — не равно; 

П <— меньше; 

О > — больше; 

С <= — меньше или равно; 
П >= — больше или равно; 
o 

o 

= 


BETWEEN <Начало> AND <Конец> — проверяет, является ли значение большим или 
равным <Начало> и меньшим или равным <Конец>: 


MariaDB [tests]> SELECT `Маше` FROM `Customers` 
-> WHERE `1а Cus tomer BETWEEN 1 AND 2; 
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тм — содержится в определенном наборе: 


MariaDB [tests]> SELECT `id Product FROM `Products` 
-> WHERE `Product`ò IN ('Монитор', 'HDD'); 


МОТ тм — не содержится в определенном наборе: 


WHERE `Product`ò МОТ ТМ ('Монитор', 'HDD'); 


LIKE 


соответствие шаблону SQL: 


MariaDB [tests]> SELECT `Ргоацсё` FROM `Products` 
-> WHERE `Product`ò LIKE 'Р%'; 


Product 
Pyuka 
П NOT LIKE — несоответствие шаблону SQL; 
С REGEXP — соответствие регулярному выражению: 


MariaDB [tests]> SELECT `Product` FROM `Products` 
-> WHERE `Product` REGEXP '^p+'; 


Product 
Pyuka 
С RLIKE — соответствие регулярному выражению (синоним REGEXP); 
ОС кот REGEXP — несоответствие регулярному выражению; 
П мот RLIKE — несоответствие регулярному выражению (синоним NOT в 


В шаблоне SQL могут использоваться следующие символы: 


og 
og 


ѕ — любое число СИМВОЛОВ; 


_ — любой одиночный символ. 


EGI 


EXP). 
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Можно проверять сразу несколько условий, указав логические операции: 
O AND или && -- логическое и; 

O окили || — логическое или. 

Результаты операции сравнения: 

O о — ложь; 

П 1 — истина; 

П NULL — возвращается, если хотя бы один из операндов равен NULL. 


Исключением является оператор эквивалентности <=>. Он возвращает только два 
значения: 0 (ложь) и 1 (истина). Этот оператор введен специально для сравнения 
значения NULL. 


Следует отметить, что по умолчанию сравнение строк происходит без учета реги- 
стра. Если указать ключевое слово BINARY, то регистр символов будет учитываться: 


SELECT 'TEXT'='text'; 

/* Выведет: 1 (истина) */ 
SELECT BINARY 'ТЕХТ'='$ехе'; 
/* Выведет: 0 (ложь) */ 


Результат сравнения можно изменить на противоположный с помошью операторов 
ГИ NOT: 

SELECT 'ТЕХТ'='$ехе'; 

/ж Выведет: 1 (истина) */ 

SELECT ! ('ТЕХТ'='Еехе'); 

/* Выведет: 0 (ложь) */ 


Логические выражения следует заключать в круглые скобки, т. к. приоритет опера- 
тора отрицания ! выше приоритета других операторов. 


6.7.4. Операторы присваивания 


Приведем список операторов присваивания: 


С := — сохраняет значение в переменной ЗОГ: 


SELECT @time := МОМ(); 


С = — сохраняет значение в переменной SQL. Можно использовать в случае при- 
менения оператора SET: 


SET @time = МОЙ(); 


6.7.5. Приоритет выполнения операторов 


При составлении выражений следует учитывать приоритет выполнения операторов. 
Приведем список операторов в порядке убывания их приоритета: 

С] BINARY, COLLATE. 
П 1. 
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С -(унарный минус), ~. 
8 ^. 


ж, /, $, МОР, DIV. 


о 


+, - — сложение, вычитание. 
<<, >>--- двоичные СДВИГИ. 

& — двоичное И. 

| — двоичное или. 


= (равно), <=>, >=, <=, >, <, <>, !=, IS, LIKE, REGEXP, ІМ. 


BETWEEN. 


| |, ОВ. 


= (присваивание), :-. 


осаачпасзаапаосва 


выражения: 

SELECT 5 + 3 * 7; 
/% Выведет: 26 */ 
SELECT (5 + 3) * 7; 
/% Выведет: 56 */ 


6.7.6. Преобразование типов данных 
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помощью круглых скобок можно изменить последовательность выполнения 


В большинстве случаев преобразование типов осуществляется автоматически. 
В этом разделе мы рассмотрим результаты автоматического преобразования ТИПОВ, 


а также встроенные функции для специального приведения типов. 
Что будет, если к числу прибавить строку? 


ЗЕЪЕСТ '5' + 3; 
/% Выведет: 8 */ 
SELECT '556' + 3; 
/* Выведет: 8 */ 


В этом случае строка преобразуется в число, а затем выполняется операция сложе- 


ния. Но что будет, если строку невозможно преобразовать в число? 


SELECT "өк" + 3; 
/ж Выведет: 3 */ 
ЗЕБЕСТ 3 + "сік"; 
/ж Выведет: 3 */ 


Если строку невозможно преобразовать в число, то она приравнивается к нулю. 
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Для ЯВНОГО преобразования типов предназначены две функции: 


CAST (<Выражение> AS <Тип>) 
CONVERT (<Выражение>, <Тип>) 
CONVERT (<Выражение> USING <Кодировка>) 


Параметр <Тип> может принимать следующие значения: 


П BINARY; 
O CHAR; 


DATE; 


DATETIME; 


SIGNED [INTEGER]; 


TIME; 


пспачавоаа 
Б 
О 
5 
257 


UNSIGNED 


Пример: 


/% Выведет: 
SELECT CONVI 


/% Выведет: 


SELECT СА5Т( "2017-11-04" AS БАТ 
2017-11-04 00:00:00 */ 
ERT ('2017-11-04', 


ЕТІМІ 


1 
` 


DATETIME) ; 


2017-11-04 00:00:00 */ 


6.8. Поиск по шаблону 


Для поиска по шаблону предусмотрены два оператора: 


O LIKE 


П кот LIKE 


соответствие шаблону SQL; 


несоответствие шаблону SQL. 


В шаблоне SQL могут присутствовать следующие специальные символы: 


С + — любое число символов; 


С  — любой одиночный символ. 


Если специальные символы не используются, то применение оператора LIKE экви- 
валентно оператору =: 


/% Выведет: 


SELECT "строка для поиска" LIKE 


0 */ 


SELECT "поиск! LIK 


/* Выведет: 


А 


E "поиск"; 


"поиск"; 


Следует помнить, что при поиске в текстовом поле регистр не учитывается. Чтобы 
учитывался регистр, необходимо указать ключевое слово BINARY: 


SELECT "РНР 
/* Выведет: 


' LIKE 
ож 


"оар"; 
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SELECT "РНР" LIKE BINARY 'php'; 
/* Выведет: 0 */ 


Специальные символы могут быть расположены B любом месте шаблона. Напри- 
мер, чтобы найти все вхождения, необходимо указать символ % в начале и в конце 
шаблона: 


SELECT "строка для поиска" LIKE '%поиск%!'; 
/% Выведет: 1 */ 


Можно установить привязку или только к началу строки, или только к концу: 


т] 


ЕСТ "строка для поиска" LIKE 'строка%'; 


% Выведет: 1 */ 


ELECT "новая строка для поиска" LIKE "строка%"; 


Выведет: 0 */ 


ELECT "строка для поиска" LIKE '%поиска'; 


% Выведет: 1 */ 


ELECT "строка для поиска 2" LIKE '%поиска!'; 
/ж Выведет: 0 */ 


СО: 92 7. ержан 02! 
ж 


Шаблон для поиска может иметь очень сложную структуру: 


SELECT "строка для поиска" LIKE '%строк NO ск%'; 
/* Выведет: 1 */ 


SELECT "строка для поиска" LIKE '°поискза'; 


/* Выведет: 1 */ 


Обратите внимание на последнюю строку поиска. Этот пример демонстрирует, что 
специальный символ % соответствует не только любому числу символов, но и пол- 
ному их отсутствию. 


Что же делать, если необходимо найти символы % и 22 Ведь ОНИ являются специ- 
альными: 

SELECT "скидка 10%" LIKE '$%10%'; 

/ж Выведет: 1 */ 
SELECT "скидка 10$' LIKE '%10%'; 
/ж Выведет: 1 */ 


В этом случае специальные символы необходимо экранировать с помошью обрат- 
ной косой черты: 

SELECT "скидка 10%! LIKE '%10\%'; 

/ж Выведет: 1 */ 
SELECT "скидка 105" LIKE '%10\3'; 
/* Выведет: 0 */ 


Обратите внимание, что функция mysqli real escape _string() не добавляет обрат- 
ную косую черту перед символами з и для их защиты. Сделать это в РНР позво- 
ляет функция адасв1азһез(): 


$text = addcslashes ($text, ! 9%"); 
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В качестве примера рассмотрим поиск по шаблону. Для этого создадим таблицу 


search B базе данных tests: 


CREATE TABLE `ѕеагсһ` ( 
`id`ò INT NOT NULL AUTO INCREMENT, 
“век” ТЕХТ, 
PRIMARY KEY (`1а`) 
) ENGINE=MyISAM CHARSET=utf8 COLLATE utf8_ general сі; 


Затем добавим две записи: 


INSERT INTO “зеаксһ” VALUES (NULL, 'Скидка 10%"); 
INSERT INTO “зеаксһ” VALUES (NULL, 'Скидка 105"); 


Исходный код с вариантами поиска по шаблону приведен в листинге 6.5. 


Листинг 6.5. Поиск по шаблону 


Şstr_search = 10%"; 
if (@$db = mysqli_connect ('localhost', 'root', '', 'tests')) { 
mysqli_set_charset ($db, 'utf8'); 


// Добавляем защитные слеши 
$5Ег ѕеагсһ = пувдіі геаі escape_string ($db, ӛзек ѕеагсһ); 


echo "Без добавления слешей перед спецсимволами:<рг>"; 
$query = "SELECT `strò FROM `ѕеагсһ` WHERE “вес” LIKE 7%"; 
$query .= Ş$str_search . "%'"; 
if ($res = mysqli _query ($db, $query)) { 
while ($row = mysqli_fetch_row($res)) { 
echo $row[0] . '<br>'; 


} 
mysqli _free_result ($res); 


echo "<рг>После добавления слешей перед спецсимволами: <юг>'; 
$5Ег ѕеагсһ = addcslashes ($str_search, " %"); 
$query = "SELECT “век” FROM `ѕеагсһ` WHERE “век” LIK 
$query .= Ş$str_search . "%'"; 
if ($res = mysqli _ query ($db, $query)) { 
while ($row = mysqli_fetch_row($res)) { 
echo $row[0] . '<5г>!; 


Е] 
О 


) 
mysqli _ free_result ($res); 
} 
mysqli _ close ($db); 
} 
else { 
echo "Не удалось установить подключение к базе данных"; 
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Открыв этот файл в М№еБ-браузере, мы увидим: 


Без добавления слешей перед спецсимволами: 
Скидка 10% 
Скидка 10$ 


После добавления слешей перед спецсимволами: 
Скидка 10% 


В этом примере предполагается, что значение переменной $str search было полу- 
чено через форму поиска. Поэтому, прежде чем подставить значение переменной 
в ЗОГ-запрос, мы экранируем специальные символы. Если этого не сделать, то 
любой пользователь сможет видоизменить ЗОГ-запрос. 


6.9. Поиск с помощью регулярных выражений 


Регулярные выражения дают возможность осуществить сложный поиск. Использо- 
вать регулярные выражения позволяют следующие операторы: 


С REGEXP — соответствие регулярному выражению; 


С RLIKE — соответствие регулярному выражению (синоним REGEXP); 


П кот REGEXP — несоответствие регулярному выражению; 


П мот RLIKE 


несоответствие регулярному выражению (синоним МОТ ВЕСЕХР). 


При использовании регулярных выражений следует помнить, что такой поиск 
выполняется медленнее, чем поиск по шаблону, и отнимает у сервера больше 
системных ресурсов. Кроме того, при работе с многобайтовыми кодировками регу- 
лярные выражения могут давать некорректный результат. 


Синтаксис регулярных выражений MySQL, РНР и JavaScript схож. В регулярных 
выражениях может встречаться ряд метасимволов: 


С ^ — привязка к началу строки. 
С $ — привязка к концу строки. 
Привязки работают так: 


SELECT '2' REGEXP '^[0-9]+$'; 

/% Выведет: 1 */ 

SELECT 'Строка2' REGEXP '^[0-9]+$'; 
/% Выведет: 0 */ 


Если убрать привязку к началу и концу строки, то любая строка, содержащая циф- 
ру, вернет 1: 

SELECT 'Строка2' REGEXP ' [0-9] +'; 

/% Выведет: 1 */ 


Можно указать привязку только к началу или только к концу строки: 


SELECT 'Строка2' REGEXP '[0-9]+5'; 
/ж Есть цифра в конце строки, значит выведет: 1 %/ 
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SELECT "Строка2" REGEXP '^[0-9]+'; 
/% Нет цифры в начале строки, значит выведет: 0 */ 


Регулярное выражение '^5' соответствует пустой строке. Если необходимо найти 
значение мотт, то следует использовать не регулярные выражения, а операторы 15 


NULL И IS МОТ NULL. 

O [[:<:]] — привязка к началу слова. 

О (1:>:11-- привязка к концу слова. 

SELECT "в середине строки" REGEXP ' [[:<:] ] середине [[:>:]]'; 


/* Выведет: 1 */ 


Квадратные скобки [] позволяют указать символы, которые могут встречаться на 
этом месте в строке. Можно записать символы подряд или указать диапазон через 


дефис: 
091 — цифра о или 9; 
0-9] — любая цифра от 0 до 9; 


абв] — буквы а, б ИЛИ в; 


а-яё] — любая русская буква ОТ а ДО я; 


п 
п 
П [a-r] — буквы а, б, в ИЛИ г; 
п 
п 


0-9а-яёа-=] — любая цифра и любая русская или латинская буква. 


Значение можно инвертировать, если после первой скобки указать символ ^. Таким 
способом можно указать символы, которых не должно быть на этом месте в строке: 


O [7091 — не цифра о и не цифра 9; 
O [70-91 — не цифра от 0 до 9; 
П [^а-яёа-2] — не русская или латинская буква. 


Поиск выполняется без учета регистра символов. Чтобы учитывался регистр, необ- 
ходимо указать ключевое слово BINARY: 

SELECT 'СтрОКа' REGEXP '^[а-яё]+$'; 

/ж Выведет: 1 */ 
SELECT 'СтрОКа' REGEXP BINARY '^[а-яё]+$'; 
/% Выведет: 0 */ 


Если при использовании кодировки ОТЕ-8 мы укажем ключевое слово BINARY, то не 
сможем получить соответствие, даже если строка состоит только из строчных букв: 
SELECT "строка" REGEXP BINARY '^[а-яё]+$'; 

/% При использовании ср1251 выведет: 1 */ 

SELECT "строка" REGEXP BINARY '^[а-яё]+$'; 

/% При использовании utf8 выведет: 0 */ 


Вместо перечисления символов можно использовать стандартные классы: 


O [[:alnm:]] — алфавитно-цифровые символы; 


O [[:alpha:]] — буквенные символы; 
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пааавасвавоаа 


:1омег:]] — строчные буквы; 

: пррег: | | — прописные буквы; 

:digit:]] — десятичные цифры; 

:xdigit:]] — шестнадцатеричные цифры; 

:punct: ]] — знаки пунктуации; 

:blank: 1] — символы табуляции и пробелов; 

: зрасе: |] — символы пробела, табуляции, новой строки или возврата каретки; 
:cntrl:]] — управляющие символы; 

іргіпе:11 — печатные символы; 

:graph: |] — печатные символы, за исключением пробельных; 


. (точка) — любой символ. 


Что же делать, если нужно найти точку, ведь символ «точка» соответствует любому 
символу? Для этого перед специальным символом необходимо указать два 
символа \, т. е. так: \\.. 


SELECT '26,11.2017' 
REGEXP '^[0-3] [0-9]. [01] [0-9]. [12] [09] [0-9] [0-9]5'; 
/* Поскольку точка означает любой символ, выведет: 1 */ 
SELECT '26,11.2017' 
REGEXP '^[0-3] [0-9] \\. [01] [0-9] \\. [12] [09] [0-9] [0-9]$'; 
/* Поскольку перед точкой указаны символы АА, выведет: 0 */ 
Число вхождений предшествующего символа или выражения в строку задается 
с помощью квантификаторов: 
С {n} — о вхождений символа (выражения) в строку: 
0-91 {2} — соответствует двум вхождениям любой цифры; 
П (1, } — пили более вхождений символа в строку: 
0-9] {2, } — соответствует двум и более вхождениям любой цифры; 
П {n,m} — не менее n и не более m вхождений символа в строку. Цифры указыва- 
ются через запятую без пробела: 
0-91{2,5} — соответствует двум, трем, четырем или пяти вхождениям любой 
цифры; 
П * — любое число вхождений символа в строку, в том числе ни одного: 
0-9] * — цифры могут не встретиться в строке или встретиться много раз; 
С + — как минимум одно вхождение символа в строку: 
0-9] + — цифра может встретиться один или много раз; 
С ? — одно или ни одного вхождения символа в строку: 


0-9]? — цифра может встретиться один раз или не встретиться совсем. 
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Для указания числа вхождений нескольких символов используются круглые скобки: 


SELECT '121212' REGEXP '^ (12) {3}$'; 
/* Выведет: 1 */ 


Также можно искать одно из двух выражений: піт, где п или п — ОДИН из символов 
(одно из выражений): 


красн (ая) | (ое) — красная ИЛИ красное, НО НЄ красный: 


SELECT "красная" REGEXP ‘красн (ая) | (ое) '; 
/* Выведет: 1 */ 


6.10. Режим полнотекстового поиска 


Кроме поиска по шаблону и применения регулярных выражений, для таблиц типа 
MyISAM ИЛИ InnoDB можно задать режим полнотекстового поиска. Столбцы, исполь- 
зуемые для поиска, должны быть проиндексированы с помощью специального 
индекса FULLTEXT. Индексации подлежат столбцы, имеющие тип CHAR, VARCHAR ИЛИ 
ТЕХТ. 


6.10.1. Создание индекса FULLTEXT 


Создать индекс FULLTEXT можно следующими способами: 


O при создании таблицы посредством оператора CREATE TABLE С помощью HHCT- 
рукции: 


FULLTEXT INDEX <Название индекса> (<Столбцы через запятую>) 


Например, так: 


CREATE TABLE `ѕеагсһ1` ( 
“1487 INT МОТ NULL AUTO INCREMENT, 
“век” TEXT, 
FULLTEXT INDEX `іпаех1` (`str`), 
PRIMARY KEY (`id`) 
) ENGINE=MyISAM CHARSET=utf8 COLLATE utf8_ general сі; 


или, если требуется создать индекс на основе сразу нескольких полей: 


CREATE TABLE `ѕеагсһ2` ( 
`1а` INT МОТ NULL AUTO INCREMENT, 
“өегі” ТЕХТ, 
зіг2` ТЕХТ, 
FULLTEXT INDEX `‘іпаех2` (`ѕігІ`, `str2`), 
PRIMARY KEY (`id`) 
) ENGINE=MyISAM CHARS] 


х] 


ІН! 


T=utf8 СОШАТІ 


148 general сі; 


О с помощью оператора ALTER TABLE. 


Например, создав таблицу: 


CREATE TABLE `search3` ( 
“іа” INT NOT NULL AUTO INCREMENT, 


T 
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“век” ТЕХТ, 
PRIMARY KEY (`id`) 
) ENGINE=MyISAM CHARSET=utf8 COLLATE utf8 general сі; 


можно добавить к ней полнотекстовый индекс так: 


ALTER TABLE `ѕеагсһ3` ADD FULLTEXT `іпаех3` (“өк”); 


Ак таблице с двумя текстовыми полями: 


CREATE TABLE `зеагср4` ( 
`1а` INT МОТ NULL AUTO INCREMENT, 
`str1` TEXT, 
`str2` TEXT, 
PRIMARY KEY (`id`) 

) ENGINE=MyISAM CHARSET=utf8 COLLATE utf8 general сі; 


T 


T 


можно добавить индекс так: 


ALTER TABLE `ѕеагсһ4` ADD FULLTEXT `іпаех4` (`ѕёг1`, `str2`); 


П c помошью оператора CREATE INDEX. 


Например, к созданной ранее таблице с одним текстовым полем можно добавить 
индекс так: 


CREATE FULLTEXT INDEX `1п4ех5` ОМ `search3` (`str`); 


Ак таблице с двумя полями так: 


CREATE FULLTEXT INDEX `1п4ехб` ОМ `зеагср4` (`strl`ò, `str2`); 


При использовании таблиц MyISAM в индекс попадут слова длиной от 4 до 84 симво- 
лов. Эти значения задаются переменными ft min мога 1еп И ЕЕ пах мога len СООТ- 
ветственно. Изменить значения этих переменных можно через конфигурационный 
файл тут. После изменения значения переменных необходимо заново создать 
индекс FULLTEXT. Посмотреть текущие значения переменных позволяет ЗОГ-команда: 


SHOW VARIABLES LIKE 'Е6%'; 


При использовании таблиц InnoDB в индекс попадут слова длиной OT 3 до 84 симво- 
лов. Эти значения задаются переменными innodb Ғе шіп token size И innodb ft_ 
шах token size соответственно. Посмотреть текущие значения переменных позво- 
ляет $ОГ-команда: 


SHOW VARIABLES LIKE 'іппоар Е%%'; 


Следует отметить, что полнотекстовый поиск предназначен для поиска в большом 
объеме текста. Если содержимое поля состоит из нескольких слов, то оно может 
вообще не попасть в индекс. 


6.10.2. Реализация полнотекстового поиска 


Полнотекстовый поиск выполняется с помощью конструкции МАТСН(...) 
АСАТМЗТ(...), которая имеет следующий формат: 
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МАТСН(<Поля через запятую>) 
АСАІМ5Т("<Строка для поиска>" [<Модификатор>]) 


Необязательный параметр <Модификатор> может принимать следующие значения: 


О] тм NATURAL LANGUAGE MODE 


значение по умолчанию; 


С] тм BOOLEAN MODE режим логического поиска; 


С] WITH QUERY EXPANSION — ПОИСК C расширением запроса. 


Для примера добавим три записи в таблицу search1: 


SERT INTO `ѕеагсһ1` VALUES (NULL, "При использовании таблиц MyISAM в индекс 
опадут слова длиной от 4 до 84 символов. Данные значения задаются переменными 
с шіп word len и ft пах word len соответственно. Изменить значения этих 
еременных можно через конфигурационный файл шу.іпі. После изменения значения 
еременных необходимо заново создать индексы ЕОШТЕХТ.!'); 

SERT INTO “зеаксҺ1” VALUES (NULL, "Запись 2"); 

SERT INTO “зеагсҺ1” VALU (NULL, "Строка 3"); 

SERT INTO `searchl` VALUES (NULL, "база данных MySQL'); 

SERT INTO `searchl` VALU (NULL, 'MySQL'); 


нымышсыныан 


ВНИМАНИЕ! 
Для реализации полнотекстового поиска в таблице должно быть не менее трех записей. 


А теперь найдем строку с помощью полнотекстового поиска: 


SELECT * FROM `зеагсь1` WHERE MATCH (`str`) AGAINST ('значения'); 


Результаты поиска сортируются по коэффициенту релевантности, который пред- 
ставляет собой число с плаваюшей точкой. Чтобы увидеть этот коэффициент, 
воспользуемся следующим ЗОГ-запросом: 


MariaDB [tests]> SELECT МАТСН (`str`) АСАТІМ5Т( файл!) AS iq 
-> FROM `search1`; 


0.9790974855422974 
0 


6.10.3. Режим логического поиска 


Режим логического поиска позволяет использовать специальные символы, которые 
влияют на значение коэффициента релевантности. Чтобы применить режим 
логического поиска, необходимо в конструкции МАТСН(...) АСАТМ8Т(...) указать 
модификатор IN BOOLEAN MODE. 
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Приведем специальные символы логического режима: 
С + — слово обязательно должно присутствовать в результате: 


SELECT * FROM `search1` 
WHERE MATCH (`str`) 
АСАІМ5Т("конфигурационный +файл' IN BOOLEAN МОР 


1 
` 


С - — слово не должно присутствовать в результате: 
SELECT * FROM `ѕеагсһ1` 

WHERE MATCH (`str`) 

АСАІМ5Т("конфигурационный -файл' IN BOOLEAN MODE); 


П < — уменьшает вклад слова в коэффициент релевантности: 
SELECT * FROM `ѕеагсһ1` 

WHERE MATCH (`str`) 

АСАІМ5Т("конфигурационный <файл' IN BOOLEAN MODE); 


С > — увеличивает вклад слова в коэффициент релевантности: 
SELECT * FROM “зеаксҺ1” 

WHERE MATCH (`str`) 

АСАІМ5Т("конфигурационный >файл' IN BOOLEAN MODE); 


С () — круглые скобки служат для группировки слов в подвыражения; 


O - — символ для указания нежелательного слова. В отличие от символа -, СИМ- 
вол - не исключает слово из результата, а лишь уменьшает коэффициент реле- 
вантности; 


П * — символ усечения. Указывается в конце слова; 
С "" — строка должна содержать точную фразу: 


SELECT * FROM “зеаксҺ1” 
WHERE MATCH (`str`) 
АСАІМ5Т(""конфигурационный файл"' IN BOOLEAN MOD. 


Зы 
` 


6.10.4. Поиск с расширением запроса 


При поиске с расширением запроса поиск фактически выполняется дважды. При 
первом поиске отбираются все записи, содержащие искомые слова. А при выпол- 
нении второго поиска ищутся записи, что включают наиболее релевантные слова из 
записей, найденных при первом поиске, даже если самих искомых слов в них нет. 
Все записи, найденные в процессе выполнения обоих поисков, объединяются 
и возвращаются в качестве результата. 


В качестве примера можно рассмотреть поиск записей, содержащих словосочета- 
ние база данных. При первом поиске будет найдена запись, которая содержит сло- 
восочетание база данных MySQL. Тогда при втором поиске будут отобраны все запи- 
си, содержащие слово MySQL. Результатом такого поиска будет набор, включающий 
как записи со словосочетанием база данных, Так и записи, что содержат слово MySQL. 
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Чтобы применить режим поиска с расширением запроса, необходимо в конструк- 
ЦИИ МАТСН(...) AGAINST (...) указать модификатор WITH QUERY EXPANSION: 


MariaDB [tests]> SELECT * FROM `зеагср1` 

-> WHERE MATCH (`str`) 

-> АСАІМӘТ("база данных" WITH QUERY EXPANSION); 
ыыы + а р ии - сі b. 


4 база данных MySQL 
5 | MySQL 


6.11. Функции MySQL 


MySQL имеет множество встроенных функций, которые позволяют выполнять 
с данными определенные действия. Например, функция мон () возвращает текущие 
дату и время, а функция DATE FORMAT () преобразует формат вывода даты. 


При использовании функций следует помнить, что между круглыми скобками и 
именем функции не должно быть пробела, а скобки нужно обязательно указывать, 
даже если в функцию не передаются аргументы. Рассмотрим функции MySQL 6o- 
лее подробно. 


ПРИМЕЧАНИЕ 
Агрегатные функции мы рассматривали в разд. 6.4.8. 


6.11.1. Функции для работы с числами 


Стандартные тригонометрические функции (аргументы должны задаваться в ра- 
дианах): 


О 5190 — синус; 

О с0$() — косинус; 
П тАм() -- тангенс; 
О сот() — котангенс. 


Обратные тригонометрические функции (возвращают значение в радианах): 


О ASIN() — арксинус; 
О acos () — арккосинус; 
П ATAN() — арктангенс. 


Округление чисел: 


П CEILING() — значение, округленное до ближайшего большего целого: 


SELECT СЕТЬТМС (4.3); 
/* Выведет: 5 */ 
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О CEIL() — то же, что и СЕТЬТМС (): 


SELECT СЕТЬ (4.3); 
/% Выведет: 5 */ 


O гтоов() — значение, округленное до ближайшего меньшего целого: 


SELECT ЕТООВ (4.5); 
/% Выведет: 4 */ 


П воомр (<х>[, <Ү>1) — значение, округленное до ближайшего меньшего целого 
для чисел с дробной частью, меньшей 0.5, или до ближайшего большего целого 
для чисел с дробной частью, равной или большей 0. 5: 


ELECT ROUND (4.49); 
* Выведет: 4 */ 
ECT ROUND (4.5); 
* Выведет: 5 */ 
ELECT ROUND (4.51); 
/* Выведет: 5 */ 


о М о М о 
т] 


Вторым аргументом для функции можно указать число знаков после запятой, до 
которых нужно округлить число: 


SELECT ROUND (4.49, 1); 


/ж Выведет: 4.5 */ 
SELECT ROUND (12.34321, 3); 
/* Выведет: 12.343 */ 


С TRUNCATE (<>, <Y>) — возвращает дробное число <х>, имеющее <Y> знаков после 
запятой. Если в качестве значения аргумента <Y> передать значение о, то функ- 
ция вернет число, округленное до меньшего целого: 


ELECT TRUNCATE 
ж Выведет: 4 * 

ЕСТ ТВОМСАТЕ 
ж Выведет: 4.5 
ELECT TRUNCATE 
/* Выведет: 4.550 */ 


02 М 092 М 9 
т] 


Функции для преобразования чисел: 


С сому (<Число>, <Исходная система>, «Нужная система>) — преобразует число из 
одной системы счисления в другую: 


SELECT CONV (255, 10, 16); 
/ж Выведет: FF */ 
SELECT CONV ('FF', 16, 10); 
/* Выведет: 255 */ 


П BIN (<Число>) -- преобразует ЧИСЛО ИЗ десятичной системы счисления В двоич- 
ную: 

SELECT ВТМ (17); 

/* Выведет: 10001 */ 


836 Гпава 6 


O нЕх(<Число>) — возвращает значение аргумента в виде шестнадцатеричного 
числа: 


SELECT НЕХ (255); 
/% Выведет: ЕЕ */ 


П ост (<число>) — преобразует число из десятичной системы счисления в восьме- 
ричную: 


SELECT. ОСТ (10); 
/% Выведет: 12 */ 


Прочие функции: 
О лв5() — абсолютное значение: 


SELECT АВ5(-4.55); 
/* Выведет: 4.55 */ 


П ЕХР() — экспонента; 
С 106(<х>) — натуральный логарифм; 
П 1062 (<х>) -- логарифм числа по основанию 2: 


SELECT 1062 (128); 
/* Выведет: 7 */ 


О 10610 (<>) — логарифм числа по основанию 10: 


SELECT LOG10 (100); 
/* Выведет: 2 */ 


О 106 (<Основание>, <X>) — Логарифм числа <X> по основанию <Основание>: 


SELECT 106(2, 128); 
/ж Выведет: 7 */ 
SELECT 106(10, 100); 
/ж Выведет: 2 */ 


П рон (<Число>, <Степень>) -- ВОЗВОДИТ <Число> В <Степень>: 


SELECT POW(5, 2); 
/* Выведет: 25 */ 


O SORT () — извлекает квадратный корень: 


SELECT ЗОВТ (25); 
/* Выведет: 5 */ 


O рІ() — возвращает число л: 


SELECT PI(); 
/* Выведет: 3.141593 */ 


П мор(оо>, <Y>) — определяет остаток от деления <X> на <Y>: 


SELECT МОр(10, 2); 
/% Выведет: 0 */ 
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х] 


П DEGRI 


Е5() — преобразует значение угла из радиан в градусы: 


х] 


SELECT ПЕСВЕЕ5(РІ()); 
/% Выведет: 180 */ 


O RADIANS () — преобразует значение угла из градусов в радианы: 


SELECT RADIANS (180); 
/* Выведет: 3.141592653589793 */ 


O SICN() — возвращает -1, если число отрицательное, 1, если число положитель- 
ное, и 0, если число равно нулю: 

ELECT 5ІСМ(-80); 

* Выведет: -1 */ 

ЕСТ SIGN (80); 

* Выведет: 1 */ 


1] 


O LEAST() — служит для определения минимального значения из списка: 


SELECT ІЕА5Т(2, 1, 3); 
/* Выведет: 1 */ 


O GREATEST () — позволяет определить максимальное значение из списка: 


SELECT СВЕАТЕЗТ (2, 1, 3); 
/* Выведет: 3 */ 


(1 FORMAT (<Число>, <Число знаков после запятой>[, <Локаль>]) — форматирует 
число в строку с заданным числом знаков после запятой в соответствии с задан- 
ной локалью. Если локаль не указана, используется американская (еп 05): 


SELECT FORMAT (56873.8732, 2); 

/* Выведет: 56,873.87 */ 

SELECT FORMAT (56873.8732, 2, 'ru RU'); 
/* Здесь мы указали российскую локаль */ 
/* Выведет: 56 873,87 */ 


О RAND() — возвращает случайное число в диапазоне от 0 до 1. Если в функцию 
передать параметр, то это настроит генератор на новую последовательность. 
Следует учитывать, что при передаче одного и того же параметра функция 
выдает одну и ту же последовательность: 


SELECT ВАМО(); 
/% Выведет: 0.35286363153985106 */ 
SELECT ВАМО(); 

/* Выведет: 0.7805252687824195 */ 
SELECT RAND (10); 

/% Выведет: 0.6570515219653505 */ 
SELECT RAND (10); 

/% Выведет: 0.6570515219653505 */ 


В качестве примера рассмотрим вывод записи из базы данных случайным образом. 
Предположим, что наш сайт — развлекательный портал, и в базе данных есть таб- 
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лица, заполненная анекдотами. При каждом запросе страницы мы будем ВЫВОДИТЬ 
один анекдот случайным образом. Для этого в базе данных tests создадим таблицу 
anecdotes: 
CREATE TABLE `anecdotes` ( 
“1487 INT МОТ NULL AUTO INCREMENT, 
`anecdote` TEXT, 
PRIMARY KEY (`id`) 


) ENGINE=MyISAM CHARSET=utf8 COLLATE utf8 general ci; 
Затем добавим несколько записей 

INSERT INTO `апесаоіеѕ` VALUES (NULL, "Анекдот 1"); 
INSERT INTO `апесаоіеѕ` VALUES (NULL, "Анекдот 2"); 
INSERT INTO `anecdotes` VALUES (NULL, "Анекдот 3"); 
INSERT INTO `anecdotes` VALUES (NULL, "Анекдот 4"); 
INSERT INTO `anecdotes` VALUES (NULL, "Анекдот 5"); 


Исходный код для вывода анекдота случайным образом приведен в листинге 6.6. 


Листинг 6.6. Вывод анекдота случайным образом 


if (@$db = mysqli_connect ('localhost', "коо", '', 'tests')) { 
mysqli_set_charset ($db, 'utf8!'); 
$query = 'SELECT * FROM `anecdotes` ORDER BY RAND() LIMIT 1'; 
if ($res = mysqli _ query ($db, $query)) { 
if ($row = mysqli_fetch_row($res)) { 
echo $row[1] . '<г>!; 


} 
mysqli free_result ($res) 


} 
mysqli _ close ($db); 
} 
else { 
echo "Не удалось установить подключение к базе данных"; 


6.11.2. Функции даты и времени 


Для получения текущих даты и времени предусмотрены следующие функции: 


С Now(), LOCALTIME () И ІОСАІТІМЕЅТАМР () — возвращают текущие дату и время для 
временной зоны, установленной в системных настройках, в формате гггг-мм-дд 
ЧЧ: ММ: СС: 


ELECT МОИ (); 

% Выведет: 2018-02-12 05:59:43 */ 
ЕСТ ТОСАГТТМЕ (); 

* Выведет: 2018-02-12 05:59:43 */ 
ECT LOCALTIMESTAMP () ; 

/* Выведет: 2018-02-12 05:59:43 */ 


о ~ о М 9 
ozi 


AI 


Основы MySQL. Работаем с базами данных 839 


Выведем информацию об установленной временной зоне: 


SELECT @@time zone; 
/% Выведет: SYSTEM */ 


Укажем временную зону явным образом: 


SET time_zone = '+03:00'; 
SELECT @@time_ zone; 
/% Выведет: +03:00 */ 


С отс _ TIMESTAMP () — выводит текущие дату и время по Гринвичу в формате гггг- 
-ДД ЧЧ:ММ:СС: 


SELECT ОТС _ TIMESTAMP ИЯ 
/* Выведет: 2018-02-12 03:00:57 */ 


O 5Ү5рАТЕ() — позволяет определить текущие дату и время в формате ГГГГ-ММ-ДД 
ЧЧ:ММ:СС: 


SELECT SYSDATE (); 
/* Выведет: 2018-02-12 06:03:22 */ 


В отличие от функции МОЙ () и ее синонимов, SYSDATE () возвращает время, в KO- 
торое она была вызвана, тогда как NOW () возвращает время начала выполнения 
запроса; 


ОВРАТЕ () И СОВВЕМТ БАТЕ() — возвращают текущую дату для временной зоны, 
становленной в системных настройках, В формате ГГГГ-ММ-ДД: 


ELECT СОВРАТЕ (); 

* Выведет: 2018-02-12 */ 
ELECT СОВВЕМТ РАТЕ(); 

/* Выведет: 2018-02-12 */ 


ос- о <о 
i 


П UTC DATE () — позволяет определить текущую дату по Гринвичу в формате гггг- 
-ДД: 
SELECT ОТС DATE ГІ? 
/% Выведет: 2018-02-12 */ 


ОВТТМЕ () И СОВВЕМТ ТІМЕ() — возвращают текущее время для временной зоны, 
становленной в системных настройках, В формате ЧЧ:ММ:СС: 


% Выведет: 06:14:18 */ 
ELECT СОВВЕМТ ТІМЕ(); 
/% Выведет: 06:14:18 */ 


с 
y 
SELECT СОЕТІМЕ(); 
/ 
5 


С отс TIME () — сообщает текущее время по Гринвичу в формате чч:мм: сс: 


SELECT ОТС ТІМЕ(); 
/* Выведет: 03:17:25 */ 


С их ТІМЕ5ТАМР() — подсчитывает число секунд, прошедших с полуночи 1 янва- 
ря 1970 г.: 
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SELECT UNIX TIMESTAMP (); 
/* Выведет: 1518451863 */ 


Ряд функций позволяют получить следующие фрагменты даты и времени: 


П DATE() — дата: 


SELECT БАТЕ(!2018-02-12 06:03:22"); 
/% Выведет: 2018-02-12 */ 


O YEAR() --ГОД: 


SELECT YEAR ('2018-02-12 06:03:22"); 
/* Выведет: 2018 %/ 


С MONTH () — месяц: 


SELECT MONTH ('2018-02-12 06:03:22"); 
/* Выведет: 2 */ 


С MONTHNAME () — название месяца в виде строки в зависимости от настроек локали 
(по умолчанию используется английская локаль еп 05): 


SELECT @@1с Е1те патеѕ; 


/* Выведет: еп US */ 
SELECT МОМТНМАМЕ ('2018-02-12 06:03:22'); 
/ж Выведет: February */ 


п DAY () И РАУОЕМОМТН () — номер дня в месяце: 
SELECT DAY ('2018-02-12 06:03:22"); 

/% Выведет: 12 */ 

SELECT РАУОЕМОМТН ('2018-02-12 06:03:22'); 
/% Выведет: 12 */ 


О ттмЕ() — время: 


SELECT TIME ('2018-02-12 06:03:22"); 
/* Выведет: 06:03:22 */ 


O норов () — час: 


SELECT HOUR ('2018-02-12 06:03:22"); 
/% Выведет: 6 */ 


О мтмотЕ() — минуты: 


SELECT MINUTE ('2018-02-12 06:03:22"); 
* Выведет: 3 */ 


> 


О SECOND () — секунды: 


SELECT SECOND ('2018-02-12 06:03:22'); 
/* Выведет: 22 */ 


С MICROSECOND () — микросекунды: 


SELECT MICROSECOND ('2018-02-12 06:03:22.123456'); 
/* Выведет: 123456 */ 
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Вместо приведенных функций можно использовать функцию 
функции: 
EXTRACT (<Тип> FROM <Дата и время>) 


Значения параметра <тип>: 
O YEAR — ГОД: 


SELECT 
/% Выведет: 


EXTRACT (YEAR FROM "2018-02-12 06:03:22"); 
2018 */ 


o YEAR MONTH — ГОД И МЕСЯЦ: 


SELECT 
/* Выведет: 


EXTRACT (YEAR MONTH FROM "2018-02-12 06:03:22"); 
201802 */ 


MONTH — месяц: 


SELECT EXTRACT (MONTH FROM '2018-02-12 06:03:22'); 
/* Выведет: 2 */ 

O рлу — день: 
SELECT EXTRACT (DAY FROM '2018-02-12 06:03:22"); 


/% Выведет: 12 */ 
DAY _ HOUR — день и час: 


SELECT 
/% Выведет: 


EXTRACT (DAY HOUR FROM "2018-02-12 06:03:22'); 
1206 */ 


DAY МТМОТЕ — ДЕНЬ, час и минуты: 


SELECT 
/% Выведет: 


EXTRACT (РАУ МТМОТЕ FROM "2018-02-12 06:03:22"); 
120603 */ 


DAY SECOND — день, час, минуты и секунды: 
"2018-02-12 06:03:22"); 


SELECT 
/% Выведет: 


EXTRACT (DAY 5ЕСОМО FROM 
12060322 */ 


841 


EXTRACT (). Формат 


п DAY МІСКОЅЕСОМр — день, час, минуты, секунды и микросекунды: 
SELECT EXTRACT (DAY _MICROSECOND 
FROM '2018-02-12 06:03:22.111111'); 
/% Выведет: 12060322111111 */ 
О HOUR — час: 
SELECT EXTRACT (HOUR FROM '2018-02-12 06:03:22'); 
/* Выведет: 6 */ 
п НООК МІ UTE — Час и минуты: 
SELECT EXTRACT (HOUR MINUTE FROM '2018-02-12 06:03:22"); 
/* Выведет: 603 */ 
O Hou R SECOND -- час, минуты и секунды: 
SELECT EXTRACT (HOUR SECOND FROM '2018-02-12 06:03:22"); 


/* Выведет: 60322 */ 
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O ноо R МТСВОЗЕСОМР — час, минуты, секунды и микросекунды: 


SELECT EXTRACT (HOUR МІСКОЅЕСОМ”Р 
FROM '2018-02-12 06:03:22.111111'); 
/* Выведет: 60322111111 */ 


О MINUTE 


минуты: 


SELECT EXTRACT (MINUTE FROM '2018-02-12 06:03:22'); 
/* Выведет: 3 */ 


С MINUTE _ SECOND — минуты и секунды: 


SELECT EXTRACT (MINUTE SECOND FROM '2018-02-12 06:03:22"); 
/* Выведет: 322 */ 


o MINUTE MICROSECOND — минуты, секунды и микросекунды: 


SELECT EXTRACT (MINUTE MICROSECOND 
FROM '2018-02-12 06:03:22.111111'); 
/% Выведет: 322111111 */ 


П 
оз 


ECOND — секунды: 


о 


ELECT EXTRACT (SECOND FROM '2018-02-12 06:03:22'); 
/* Выведет: 22 */ 


o SECOND MICROSECOND — секунды и микросекунды: 


SELECT EXTRACT (SECOND MICROSECOND 
FROM '2018-02-12 06:03:22.111111'); 
/% Выведет: 22111111 */ 


С мтсвозЕсомр — микросекунды: 


SELECT EXTRACT (MICROSECOND FROM '2018-02-12 06:03:22.111111'); 
/% Выведет: 111111 */ 


С помощью следующих функций можно получить дополнительные сведения о дате: 


С ОСАВТЕВ() — порядковый номер квартала в году (от 1 до 4): 


SELECT QUARTER ('2018-02-12'); 
/* Выведет: 1 */ 


П WEEK(<Jara>[, <Режим>]) — порядковый номер недели. Необязательный второй 
параметр задает режим вычисления номера недели: если второй параметр не за- 
дан, для него устанавливается значение 0 (при котором значение возврашается 
в диапазоне от 0 до 53, неделя начинается с воскресенья): 


1] 


SELECT WEEK ('2018-02-12'); 
/* Выведет: 6 */ 


T 


С WEEKOFYEAR() — порядковый номер недели в году (от 1 до 53). Фактически 
выполняет ту же задачу, что вызов функции WEEK () с параметром режима 3: 


T 


SELECT WEEKOFYEAR ('2018-02-12'); 
/* Выведет: 7 */ 


T 
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951, 


П УЕАВИЕЕК (<Дата>[, <Режим>1) — число в формате ггггнн, где гггг — год, а нн — 
порядковый номер недели в году. Второй параметр выполняет ту же задачу, что 
второй параметр функции WEEK (): 


El 


SELECT YEARWEEK ('2018-02-12'); 
/* Выведет: 201806 */ 


С DAYOFYEAR () — порядковый номер дня в году (OT 1 до 366): 


SELECT DAYOFYEAR ('2018-02-12'); 
/* Выведет: 43 */ 


С MAKEDATE (<Год>, <Номер дня в году>) — дата в формате гггг-мм-дд по номеру 
дня в году: 


SELECT МАКЕРАТЕ (2018, 43); 
/* Выведет: 2018-02-12 */ 


т 


П DAYOFWEEK () — порядковый номер дня недели (1 — для воскресенья, 2 — для MO- 
недельника, ..., 7 — для субботы): 


SELECT DAYOFWEEK ('2018-02-12'); 
/* Выведет: 2 */ 


T 


П WEEKDAY () — порядковый номер дня недели (0-- для понедельника, 1 — ДЛЯ 
вторника, ..., 6 — для воскресенья): 


а 


SELECT WEEKDAY ("2018-02-12"); 
/* Выведет: 0 */ 


С DAYNAME () — название дня недели в зависимости от настроек локали (по умолча- 
нию используется английская локаль еп 05): 


SELECT @@1с Е1те патеѕ; 


/* Выведет: еп US */ 
SELECT РАУМАМЕ ("2018-02-12"); 
/* Выведет: Мопдау */ 


С то DAYS (<Дата>) — число дней, прошедших с нулевого года: 


SELECT TO_DAYS ('2018-02-12'); 
/% Выведет: 737102 */ 


С FROM DAYS (<Число дней>) — дата в формате гггг-мм-дд по числу дней, прошед- 
ших с нулевого года: 


SELECT FROM_DAYS (737102); 
/% Выведет: 2018-02-12 */ 


С TIME ТО 5ЕС(<Время>) — число секунд, прошедших с начала суток: 


SELECT TIME ТО 5ЕС('16:15:24'); 
/% Выведет: 58524 */ 


О SEC ТО ТІМЕ (<Число секунд>) — время в формате чч:мм:сс по числу секунд, про- 
шедших с начала суток: 


844 


5 


/% Выведет: 


EL 


ECT SEC TO TIMI 


Е (58524); 
16:15:24 */ 
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Для манипуляции датой и временем можно использовать следующие функции: 


ПІ АррраАт! 
<Интервал> <1 


П SUBDATI 
<Интервал> <1 


Параметр <тип> в функциях Арррлт! 


принимать следующие значения: 


Е(<Дата>, 


Е(<Дата>, 


EAR — ГОД: 
ELECT AD 


ж Выведет: 


DDATE 
2 


EAR MONTH — 


ELECT AD 
/% Выведет: 


РРАТЕ 
2 


MONTH — месяц: 
ЕТ 
ж Выведет: 


ЕСТ АРОРАТЕ 
2 


ОАВТ! 


F 


ЕСТ ADDDATE 
2 


ж Выведет: 


F 


EK — неделя: 


о = о О хо 


F 


ЕСТ ADDDATE 
2 


/% Выведет: 


DAY — день: 


SEL 
/% Выведет: 


ЕСТ ADDDATE 
2 


DAY | 


ERVAL 
/* Выведет: 


DAY _ MINUTE 


ЕСТ AD 


ERVAL 
/% Выведет: 


DDATE 
63 
2 


DAY SECOND —- 


SELECT ADDDATE 
INTERVAL '6 3 
/* Выведет: 2 


т 


INT] 


INT] 


ERVAL 


ERVAL 


("20 


020-0 


("20 


020-0 


("20 


018-0 


ER — квартал: 


('20 


018-0 


("20 


018-0 


("20 


018-0 


РАТ 


<Интервал> <Тип>) И РАТ 
гип>) — прибавляют к параметру <д 


<Интервал> <Тип>) И РАТ! 
Гип>) -- вычитают из параметра <л 


Е (), 


час (формат 'д 


Л 


DAY HOUR) ; 


018-0 


("20 


("20 


018-0 


2-18 09: 


18-02-12 06:03:22", 
2-12 06:03:22 */ 


18-02-12 06:03:22", 
5-12 06:03:22 */ 


18-02-12 06:03:22", 
5-12-06;:08%22/ ЖУ 


18-02-12 06:03:22", 
3-05 06:03:22 */ 


18-02-12 06:03:22", 
2-18 06:03:22 */ 


чч"): 


18-02-12 06:03:22", 


2-18 09:03:22 */ 


08:22 */ 


INTI 


INTI 


INTI 


INTI 


INTI 


INTI 


день, час и минуты (формат 'д 
18-02-12 06:03:22", 
:5" DAY MINUTE); 
018-0 


Е ADD (<J 


т 


ата>, INTERVAL 


ата> временной интервал; 


Е SUB (<J 


т 


ата>, INTERVAL 


E ADD(), ЗОВРАТ] 


ERVAL 


2Y 


год и месяц (формат "гг-мм"): 


18-02-12 06:03:22', 
4-12 06:03:22 */ 


ЕКУАТ 


ЕКУАТ 


ЕКУАТ 


ЕКУАТ 


"2-22 


ата> временной интервал. 


Е() И РАТЕ 50В() может 


БАҚ); 


У 


EAR МОМТН); 


3 MONTH) ; 


І QUARTER) ; 


3 WE 


ЕК); 


ЕКУАТ 


день, час, минуты и секунды (формат "д 
18-02-12 06:03:22", 
рае DAY SECOND) ; 
2-18 09:08:37 */ 


ЧЧ: 


6 ПАУ); 


т 


| ЧЧ:ММ:СС'): 
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Ф DAY MICROSECOND — день, час, минуты, секунды и микросекунды (формат 
"ДД ЧЧ:ММ:СС.ХХХХХХ'): 


SELECT ADDDATE ("2018-02-12 06:03:22", 
INTERVAL '6 3:5:15.10' DAY МТСВОЗЕСОМО); 
/* Выведет: 2018-02-18 09:08:37.100000 */ 


е HOUR — час: 


SELECT ADDDATE ('2018-02-12 06:03:22", INTERVAL 3 HOUR); 
/* Выведет: 2018-02-12 09:03:22 */ 


® HOUR MINUTE — час и минуты (формат 'чч:мм'): 


SELECT ADDDATE ('2018-02-12 06:03:22', 
INTERVAL "3:7! HOUR МІМОТЕ); 
/% Выведет: 2018-02-12 09:10:22 */ 


e HOUR SECOND — час, минуты и секунды (формат 'чч:мм:сс'): 
SELECT ADDDATE ("2018-02-12 06:03:22”, 

INTERVAL '3:7:15' НООЕ ЗЕСОМБ); 

/* Выведет: 2018-02-12 09:10:37 */ 


e HOUR MICROSECOND -- час, минуты, секунды и микросекунды (формат 
"ЧЧ:ММ:СС.ХХХХХХ'): 

SELECT АРОРАТЕ ("2018-02-12 06:03:22', 

INTERVAL '3:7:15.10' HOUR МТСВОЗЕСОМР) ; 

/* Выведет: 2018-02-12 09:10:37.100000 */ 


өе MINUTE — МИНУТЫ: 


SELECT ADDDATE ('2018-02-12 06:03:22", INTERVAL 8 MINUTE); 
/% Выведет: 2018-02-12 06:11:22 */ 


е MINUTE SECOND — минуты и секунды (формат 'мм:сс'): 


SELECT ADDDATE ("2018-02-12 06:03:22", 
INTERVAL "3:7" МІ ОТЕ SECOND) ; 
/* Выведет: 2018-02-12 06:06:29 */ 


e MINUTE MICROSECOND — минуты, секунды и микросекунды (формат 
'MM:CC.XXXXXX' ): 


ELECT ADDDATE ("2018-02-12 06:03:22', 
ГЕВУАТ '3:7.11' MINUTE MICROSECOND) ; 
* Выведет: 2018-02-12 06:06:29.110000 */ 


a 


S 
I 
/ 


ЗЕСОМО — секунды: 
SELECT ADDDATE ('2018-02-12 06:03:22', INTERVAL 15 SECOND); 
/* Выведет: 2018-02-12 06:03:37 */ 


өе SECOND MICROSECOND — секунды и микросекунды (формат 'сс.хххххх'): 


SELECT ADDDATE (2018-02-12 06:03:22", 
INTERVAL '15.123456' SECOND MICROSECOND) ; 
/* Выведет: 2018-02-12 06:03:37.123456 */ 


Ф MICROSECOND — микросекунды: 


SELECT ADDDATE ("2018-02-12 06:03:22", 
INTERVAL 123456 МТСВОЗЕСОМО); 
/% Выведет: 2018-02-12 06:03:22.123456 */ 


п ADDDATE (<Дата>, <Интервал в днях>) — прибавляет к параметру <д 
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ата> времен- 


ной интервал в днях. Если указать перед интервалом знак -, то интервал вычита- 


ется из даты: 


SELECT ADDDATE ('2018-02-12', 10); 
/ж Выведет: 2018-02-22 */ 
SELECT ADDDATE ('2018-02-12', -10); 
/ж Выведет: 2018-02-02 */ 


СП SUBDATE (<Дата>, <Интервал в днях>) -- вычитает из параметра <Дата> временной 
интервал в днях. Если указать перед интервалом знак -, то интервал прибавляет- 


ся к дате: 


SELECT ЗОВРАТЕ ('2018-02-12', 10); 
/ж Выведет: 2018-02-02 */ 
SELECT ЗОВРАТЕ ('2018-02-12', -10); 
/ж Выведет: 2018-02-22 */ 


О ADDTIME (<Дата>, <Время>) — прибавляет к параметру <Дата> временной интер- 
вал: 
SELECT АРОТТМЕ ('2018-02-12 06:03:22', '12:52:35'); 
/% Выведет: 2018-02-12 18:55:57 */ 

ПІ SUBTIME (<Дата>, <Время>) -- вычитает из параметра <Дата> временной интервал: 
SELECT 5ОВТІМЕ(!2018-02-12 06:03:22", '12:52:35'); 
/% Выведет: 2018-02-11 17:10:47 */ 


С рАТЕРТЕЕ (<Конечная дата>, <Начальная дата>) — вычисляет число дней между 


двумя датами: 


SELECT РАТЕРІЕЕ ('2018-02-12', '2018-01-03'); 
/% Выведет: 40 */ 


п ТТМЕОТЕЕ (<Конечная дата>, «Начальная дата>) — вычисляет разницу между дву- 


мя временными значениями: 

ЕҺЕСТ ТТМЕОТЕЕ ('16:15:24', '08:43:17'); 

% Выведет: 07:32:07 */ 

ELECT ТТМЕОТЕЕ ("2018-02-12 22:36:43", '2018-02-12 15:36:43"); 
* Выведет: 07:00:00 */ 


САЗЫ 6)! 


п PERIOD ADD (<Дата>, <Число месяцев>) -- добавляет заданное <Число месяцев> к да- 


те, заданной в формате ггггмм или ггмм: 


T 


SELECT PERIOD ADD (201802, Ajos 
/* Выведет: 201806 */ 
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o 


PERIOD РІЕЕ(<Конечная дата>, <Начальная дата>) -- вычисляет разницу B Meca- 
цах между двумя временными значениями, заданными в формате ГГГГММ ИЛИ 
ГГММ: 


SELECT PERIOD DIFF (201812, 201810); 
/* Выведет: 2 */ 


СОМУЕКТ Т2(<Дата>, <Часовой пояс 1>, <Часовой пояс 2>) — переводит дату из 
одного часового пояса в другой: 


SELECT СОМУЕВТ Т2(!2018-02-12 06:03:22", '+00:00', '+4:00'); 
/% Выведет: 2018-02-12 10:03:22 */ 


ТАЗТ РАҮ (<Дата>) — возвращает дату в формате гггг-мм-дд, в которой день 
выставлен на последний день текущего месяца: 


SELECT LAST рАҮ(!2018-02-12 06:03:22"); 
/% Выведет: 2018-02-28 */ 


МАКЕТТМЕ (<Часы>, <Минуты>, <Секунды>) -- возвращает время в формате УЧ: ММ: СС: 


SELECT МАКЕТТМЕ (12, 52, 35); 
/* Выведет: 12:52:35 */ 


TIMESTAMP (<Дата>[, <Время>]) — возвращает дату в формате ГГГГ-ММ-ДД ЧЧ:ММ:СС: 
SELECT ТІМЕЅТАМР ('2018-02-12'); 

/* Выведет: 2018-02-12 00:00:00 */ 

SELECT TIMESTAMP ('2018-02-12', '13:48:11'); 

/% Выведет: 2018-02-12 13:48:11 */ 


Помимо описанных функций, добавить или вычесть интервал времени можно с по- 
мощью операторов + и -, за которыми следует ключевое слово INTERVAL, значение и 


тип интервала. Применимы те же типы интервалов, что и в функциях АРРРАТ! 


ІН! 


0, 


DATE ADD (), SUBDATE () И РАТЕ 50В (): 


ЕСТ '2018-02-12 06:03:22' + INTERVAL '3:7:15' НООК ЅЕСОМР; 


Выведет: 2018-02-12 09:10:37 */ 
ЕСТ "2018-02-12 06:03:22!" - INTERVAL '3:7:15' HOUR SECOND; 


Выведет: 2018-02-12 02:56:07 */ 


Для форматирования даты и времени предназначено несколько функций: 


o 


T 


DATE FORMAT (<Дата>, <Формат>) — форматирует дату в соответствии со строкой 
<Формат>: 


SELECT РАТЕ FORMAT ('2018-02-12 06:03:22", 1%а.%п.%Ү"); 
/% Выведет: 12.02.2018 */ 


T 


ӨТЕ ТО БАТЕ(<Строка>, <Формат>) — возвращает дату и (или) время, соответст- 
вующую строке <Формат>: 


SELECT 5ТК ТО РАТЕ('20.11.2018 13:48:11", '%d.%m.%Y %Н:%1:%5"); 
/% Выведет: 2018-11-20 13:48:11 */ 
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SELECT 5ТК ТО РАТЕ ('20.11.2018', '%d.%m.%Y'); 
/% Выведет: 2018-11-20 */ 

SELECT 5ТЕ ТО РАТЕ ('13:48:11', '%Н:%1:%5'); 
/* Выведет: 13:48:11 */ 
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С ТІМЕ ҒОВМАТ(<Время>, <Формат>) — форматирует время в соответствии со стро- 


КОЙ <Формат>: 


SELECT TIME FORI АТ ('16:15:24', "%Н 61 %5"); 
/% Выведет: 16 15 24 */ 


О FROM ОМІХТІМЕ (<Дата>[, <Формат>]) — возвращает дату в формате гггг-мм-д 


л 


чч:мм:сс или соответствующую строке <Формат> по числу секунд, прошедших 


полуночи 1 января 1970 г.: 


с 
SELECT ЕКОМ ОМІХТІМЕ (1518451863); 
/ж Выведет: 2018-02-12 19:11:03 */ 
5 

/ 


ELECT FROM ОМТХТТМЕ (1518451863, "%а.%п.%Ү"); 
% Выведет: 12.02.2018 */ 


С СЕТ ҒОВМАТ(<Тип времени>, "<Стандарт>") — возвращает строку форматирова- 
ния для пяти стандартов отображения даты и времени. Параметр <Тип времени> 


может принимать следующие значения: 


® DATETIME — дата и время; 
e DATE — дата; 
 ТІМЕ- время. 


Параметр <Стандарт> может принимать такие значения: 
e 150 — стандарт ISO; 


® EUR — европейский стандарт; 


® (ЗА — американский стандарт; 
е 015 — ЯПОНСКИЙ стандарт; 


e INTERNAL — внутренний формат MySQL. 


Пример: 


SELECT GET_FORMAT (DATE, 'EUR'); 
У ж/ 


SELECT DATE FORMAT "2018-02-12 06:03:22", 
СЕТ ЕОВМАТ (DATE, 'Е0В')); 
/% Выведет: 12.02.2018 */ 


/* Выведет: %а.%п.% 
( 


Параметр <Формат> в функциях форматирования может содержать следующие ком- 


бинации символов: 

П %Ү--год из четырех цифр; 

П зу — год из двух цифр; 

С зп — номер месяца с предваряющим нулем (от 01 до 12); 
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зс — номер месяца без предваряющего нуля (от 1 до 12); 

зр — аббревиатура месяца из трех букв (зависит от локали); 
%М-- полное название месяца (зависит от локали); 

за — номер дня с предваряющим нулем (от 01 до 31); 

зе — номер дня без предваряющего нуля (от 1 до 31); 

%ч-- номер дня недели (0 — для воскресенья и 6 — для субботы); 
за — аббревиатура дня недели из трех букв (зависит от локали); 
SW — полное название дня недели (зависит от локали); 

эн — часы в 24-часовом формате (от 00 до 23); 

зк — часы в 24-часовом формате (от 0 до 23); 

šh H $I — часы в 12-часовом формате (от 01 до 12); 

%1 — часы в 12-часовом формате (от 1 до 12); 

зі — минуты (от 00 до 59); 

%s — секунды (от 00 до 59); 


sf — микросекунды; 


ооо, о‚о о о,о о ооо ообо 


3% — знак процента. 


Настройки параметра <Формат> зависят от значения переменной lc time names. 
Выведем текущее значение переменной: 


SELECT @@1с Е1те патеѕ; 
/* Выведет: еп 0$ */ 


В качестве примера изменим значение переменной и выведем название месяца на 
русском языке: 

SELECT РАТЕ FORMAT ('2018-02-12 06:03:22", '3а %M %%'); 

/* Выведет: 12 February 2018 */ 

SET 1с ііюе памез = "ги ҚУ"; 

SELECT РАТЕ FORMAT ('2018-02-12 06:03:22", '3а %М %Ү!); 

/ж Выведет: 12 Февраля 2018 */ 


6.11.3. Функции для обработки строк 


Приведем основные функции для обработки строк: 


п CHAR LENGTH (<Строка>) И CHARACTER LENGTH (<Строка>) -- возвращают длину стро- 
ки в символах. Функции корректно работают с многобайтовыми кодировками: 


SELECT CHAR LENGTH ('Строка'); 

/* Выведет: 6 */ 

SELECT CHARACTER ТЕМСТН("Строка"); 
/* Выведет: 6 */ 


ІН 
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С LENGTH (<Строка>) — возвращает длину строки в байтах (вследствие чего длина 


SELECT ҺЕМСТН("Строка"); 
/ж Выведет (ср1251): 6 */ 
/ж Выведет (1548): 12 */ 


С вт ІЕМСТН (<Строка>) -- возвращает длину строки в битах: 


SELECT ВІТ LENGTH ("Строка"); 
/* Выведет (ср1251): 48 */ 
/% Выведет (1548): 96 */ 


строк, записанных в многобайтовых кодировках, определяется некорректно): 


п СОМСАТ (<Строка 1>, <Строка 2>, ..., <Строка N>) — объединяет все параметры 


в одну строку: 


SELECT СОМСАТ ('string1l1', 'string2', 'string3'); 
/* Выведет: stringlstring2string3 */ 


п СОМСАТ М5 (<Разделитель>, <Строка 1>, ..., <Строка N>) — объединяет все па- 
раметры в одну строку через разделитель, заданный в параметре <Разделитель>: 


SELECT СОМСАТ М$(' - ', 'stringl', 'string2', 'string3'); 
/% Выведет: $61091 - $61092 - string3 */ 


O TRI 


[<Откуда>] [<Символы для удаления>| FROM] <Строка>) — удаляет из Haya- 


ла (и/или конца) строки символы, указанные в параметре <Символы для удале- 
ния>. Если параметр не указан, то удаляются пробелы. Необязательный параметр 


<Откуда> может принимать значения: 


е ВОТН-- символы удаляются из начала и конца строки (по умолчанию); 


ө ЕАРТМС — ТОЛЬКО из начала строки; 
© TRAILING — ТОЛЬКО ИЗ конца строки. 
Примеры: 
SELECT СО САТ", ТВТ (ет String A тта 
/* Выведет: 'String' */ 
SELECT СОМСАТ(""", TRIM(LEADING FROM ' String р 
/ж Выведет: 'String қож” 
SELECT СОМСАТ(""", ТВТМ(ТВАТЬТМС FROM ' String Елге AAT E 
/* Выведет: ' String ж-/ 
SELECT СОМСАТ ("'", ТЕІМ(ВОТН 'm' FROM 'mmmmStringmmmm'), "'"); 
/ж Выведет: 'String' */ 
SELECT СОМСАТ ( ит t TRI (TRAILING т іпа" ЕВОМ т Stringing' ) Р ит w ; 
/* Выведет: "бек" */ 
SELECT CONCAT ( ит 192 ТВТ (TRAILING "ап" ЕВОМ 'String' ) Р ит ") ; 
/ж Выведет: 'String' */ 
С іткім(<строка>) — удаляет пробелы в начале строки: 
SELECT СОМСАТ(""", LTRIM(' SEring Eyy TENN 


/* Выведет: 'String т 
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П ЕТЕІМ(<Строка>) — удаляет пробелы в конце строки: 


/% Выведет: 


П ІОНЕВ(<Строка>) И LCASI 


/* Выведет: 


SELECT СОМСАТ(""", ВТВТМ(' String 1); """); 


Ы String! */ 


SELECT LOWER ('СТРОКА'); 


строка */ 


SELECT LCASE ('CTPOKA'); 


/% Выведет: 


0 UPPER (<Строка>) И UCASI 


T 


ж Выведет: 


ж Выведет: 


С REVERSE (<Строка>) — возвращает строку в обратном порядке: 


строка */ 


ELECT UPPER ('строка'); 


CTPOKA */ 


ELECT ОСАЗЕ ('строка'); 


СТРОКА */ 


SELECT REVERSE ('string'); 


/% Выведет: 


gnirts */ 


Е (<Строка>) -- переводят все символы B НИЖНИЙ регистр: 


Е (<Строка>) — переводят все символы в верхний регистр: 


O ІЕЕТ(<Строка>, <Число символов>) — возвращает заданное число крайних CHM- 


волов слева: 


SELECT LEFT 
/% Выведет: 


("зегіпа!, 2); 
ве */ 


O RIGHT (<Строка>, <Число символов>) -- возврашает заданное число крайних CHM- 
волов справа: 


/% Выведет: 


SELECT RIGHT ('string', 2); 


па */ 


o 5ОВ5ТКІМС(<Строка>, <Начальная позиция>[, <Длина>]), SUBSTR (<Строка>, <Начальная 


позиция> [, 


<Длина>]) И МТО (<Строка>, <Начальная позиция> [, 


<Длина>|) --- ПО- 


зволяют получить подстроку заданной длины, начиная с позиции <Начальная 


позиция>. Ес 
ца строки: 

ELECT SUBST 
ж Выведет: 
ЕСТ SUBSTI 
ж Выведет: 


о М о М 9 
AI 


/* Выведет: 


Первые две функции имеют альтернативный синтаксис: 


SELECT 50В51 
/% Выведет: 
SELECT 50В51 
/% Выведет: 


ли параметр <л 


ГВТМС ('string', 2, 2); 
ЕЕ 

IRE SEEING p 2, 2); 
Егеу 


ELECT MID('string', 2); 


tring */ 


TRING ('string' FROM 2 FOR 3); 
Егі */ 

TRING ('string' FROM 2); 

tring */ 


[лина> не задан, то возвращаются все символы до KOH- 


852 Гпава 6 


п LPAD (<Строка>, <Длина>, <Подстрока>) — добавляет подстроку к исходной стро- 
ке слева, доводя общую длину строки до величины <Длина>: 


SELECT LPAD('string', 11, 'mp'); 
/* Выведет: mpmpmstring */ 


п КРАР (<Строка>, <Длина>, <Подстрока>) — добавляет подстроку к исходной стро- 
ке справа, доводя общую длину строки до величины <Длина>: 


SELECT RPAD('string', 10, 'mp'); 
/* Выведет: stringmpmp */ 


С REPEAT (<Строка>, <Число повторений>) — возвращает строку, содержащую за- 
данное число повторений исходной строки: 


SELECT REPEAT ('str', 3); 
/* Выведет: strstrstr */ 


П ЗРАСЕ (<Число пробелов>) — Возвращает строку, состоящую из заданного числа 
пробелов: 
SELECT CONCAT("'", SPACE (3), 'String', "'"); 
/% Выведет: ' String' */ 

О вт (<Номер из списка>, <Строка 1>, ..., <Строка N>) — позволяет получить 


одну строку из списка параметров, номер которой задается первым параметром: 


БЕҺЕСТ ЕПШТ(2, "зЕгіпді", '5$6г1092', !зігіпаз"); 
/ж Выведет: string2 */ 


O ASCII (<Строка>) — возвращает код ASCII первого символа строки: 


SELECT ASCII ('String'); 
/* Выведет: 83 */ 


П овр(<Строка>) — дает возможность узнать код первого символа строки. Kop- 
ректно работает с многобайтовыми кодировками. Если первый СИМВОЛ — ОДНО- 
байтовый, вернет то же значение, чтои ASCII (): 

SELECT ОКР ('5ігіпд!'); 

/* Выведет: 83 */ 


ПІ CHAR (<АЅСІІ-код 1>, <АЅСІІ-код 2>, ..., <А5СІІ-код N> [USING <Кодиров- 
ка>1) -- возвращает строку, состоящую из последовательности символов, соот- 
ветствующих АЗСП-кодам: 

SELECT CHAR (83, 116, 114, 105, 110, 103); 

/% Выведет: String */ 


Пі 5ТЕ (<Строка>, <Подстрока>) ИЛИ РОЗІТІОМ(<Подстрока> ІМ <Строка>) — ИЩУТ 
подстроку в строке и возвращают позицию ее первого вхождения. Если вхожде- 
ниене найдено, то возврашается 0: 

SELECT ІМ5ТЕ("зігіп("!, 'st'); 

/% Выведет: 1 */ 
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SELECT РО5ІТІОМ(!ө%!" ІМ 'string'); 
/ж Выведет: 1 */ 
SELECT POSITION ('рЕ' ТМ 'string'); 
/% Выведет: 0 */ 


п LOCATE (<Подстрока>, <Строка>|, <Начальная позиция>]) — возвращает позицию 
первого вхождения подстроки в строку, начиная с указанной начальной пози- 
ЦИИ. Если подстрока не найдена, то возвращается 0. Если начальная позиция не 
указана, то поиск производится с начала строки: 

SELECT LOCATE ('st', 'string_st'); 

/* Выведет: 1 */ 

SELECT LOCATE ('st', 'string_st', 3); 

/* Выведет: 8 */ 


п FIELD (<Исходная строка>, <Строка 1>, ..., <Строка N>) — Позволяет опреде- 
лить номер строки из списка <Строка 1>, ..., <Строка N>, которая совпадает с AC- 
ходной строкой: 


SELECT FIELD (VSE; !"зігіпа!, '56', '512'); 
/% Выведет: 2 */ 


T 


o FIND ІМ ЅЕТ (<Исходная строка>, <Список подстрок через запятую>) -- возвраща- 
ет номер строки из списка <Список подстрок через запятую>, которая совпадает 
с исходной строкой: 

SELECT КІМІ ІМ $ЕТ ('56', "ѕігіпад, 56, $62'); 

/ж Выведет: 2 */ 


REPLACE (<Строка>, <Подстрока для замены>, <Новая подстрока>) — заменяет все 
вхождения подстроки на новую подстроку и возвращает результат: 
5 
У, 


ELECT КЕРҺАСЕ("Привет, Петя", "Петя", "Вася"); 
% Выведет: Привет, Вася %/ 


С SUBSTRING INDEX (<Строка>, <Подстрока>, <Номер вхождения>) — находит N-e вхож- 
дение подстроки в строку, где М задается параметром <Номер вхождения>, И ВОЗ- 
вращает часть строки, расположенную слева от подстроки: 


SELECT SUBSTRING INDEX ('синий, красный, зеленый", ',', 1); 
/% Выведет: синий */ 
SELECT ЗОВЗТВТМС ТМОЕХ ('синий, красный, зеленый", ',', 2); 


/* Выведет: синий, красный */ 


Если параметр <Номер вхождения> имеет отрицательное значение, то ищется 
N-e вхождение подстроки с конца строки и возвращается часть строки, располо- 
женная справа от найденной подстроки: 


SELECT СОМСАТ(""", 

5ОВ5ТКІМС ІМПЕХ( "синий, красный, зеленый", ',', -1), """); 
/% Выведет: " зеленый" */ 

SELECT СОМСАТ(""", 

5ОВ5ТКІМС ІМПБЕХ( "синий, красный, зеленый", ',', -2), """); 


/% Выведет: красный, зеленый" */ 
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Пі ЗЕВТ (<Строка>, <Начальная позиция>, <Длина>, <Подстрока>) --- заменяет 
фрагмент в строке с начальной ПОЗИЦИИ ДЛИНОЙ <Длина> на значение параметра 
<Подстрока>: 
SELECT INSERT ('красный', 6, 2, 'ое'); 
/* Выведет: красное */ 
SELECT INSERT ('красный', 6, 1, 'ое!); 
/* Выведет: красноей */ 
o QUOTE (<Строка>) — экранирует все специальные символы в строке: 
SELECT ОООТЕ("Д"Артаньян и три мушкетера"); 
/* Выведет: Д\'Артаньян и три мушкетера */ 
С охнех(<строка>) — переводит строку из шестнадцатеричных цифр в обычную 


строку. Каждая пара символов в исходной строке 


воспринимается как шестна- 


дцатеричное число, которое преобразуется В СИМВОЛ: 


SELECT ОМНЕХ ('537472696Е67'); 
/% Выведет: String */ 
С COMPRESS (<Строка>) — архивирует строку. Сжатую строку следует хранить в по- 
лях, имеющих бинарный тип данных; 
С UNCOMPRESS (<Строка>) -- разархивирует строку, сжатую функцией COMPRESS (): 
SELECT ОМСОМРВЕ$$ (COMPRESS ("Строка")); 
/* Выведет: Строка %/ 
С UNCOMPRESSED LENGTH (<Строка>) -- позволяет узнать длину строки в байтах, KOTO- 
рую она будет иметь после разархивирования: 
SELECT UNCOMPRESSED LENGTH (COMPRESS ('Строка')); 
/% Выведет (ср1251): 6 */ 
/ж Выведет (1548): 12 */ 
ПІ CHARSET (<Строка>) — возвращает название кодировки для строки: 
SELECT CHARSET ('Строка'); 
/* Выведет (в консоли): ср1251 */ 
/% Выведет (в phpMyAdmin): utf8mb4 */ 
ПІ COLLATION (<Строка>) — возвращает порядок сравнения для строки: 
SELECT СОПҺАТТОМ("Строка"); 
/* Выведет (в консоли): ср1251 general сі */ 
/* Выведет (в phpMyAdmin): utf8mb4 unicode сі */ 
ПІ STRCMP (<Строка 1>, <Строка 2>) — сравнивает две строки и возвращает: 


% 0 — если строки идентичны; 


e -1 — ЕСЛИ <Строка 1> больше <Строка 2>; 


èe 1 — если <Строка 1> меньше <Строка 2>. 


Основы MySQL. Работаем с базами данных 855 


Примеры: 

SELECT ЅТКСМР ('Строка', 'Строка'); 
/ж Выведет: 0 */ 

SELECT 5ТЕСМР("Строка1!, "Строка2"); 
/* Выведет: -1 */ 

SELECT $ТВСМР ('Строка2', "Строка1"); 


/% Выведет: 1 */ 


Сравнение строк чувствительно к регистру; 


С LOAD FILE (<Путь к файлу>) — возвращает содержимое файла в виде строки. Hac- 
то используется для заполнения бинарных полей. В качестве примера создадим 
текстовый файл с названием test.txt в каталоге Сл\хатрр\ћіаосѕ. Затем запишем 
в файл строку Content. Теперь получим содержимое файла с помощью функции 
LOAD FILE (): 


SELECT LOAD FILE ('C:/xampp/htdocs/test.txt'); 
/* Выведет: Content */ 


6.11.4. Функции для шифрования строк 


Для необратимого шифрования применяются следующие функции: 


П мр5 (<Строка>) — кодирует строку по алгоритму мр5. Возвращает шестнадцате- 
ричное число, содержащее 32 шестнадцатеричные цифры: 


SELECT Мр5("раззмога"); 
/% Выведет: 5f4dcc3b5aa765d61qd8327deb882cf99 */ 


ЗНА (<Строка>) И 5НА1 (<Строка>) — возвращают 40-разрядное шестнадцатеричное 
число: 

SELECT ЗНА ('раѕѕиога'); 

/% Выведет: 5baa6le4c9b93f3f0682250b6cf8331b7ee68fd8 */ 

5 

/ 


ELECT SHA1 ('раззмога'); 
* Выведет: брааб1е4с9093#3#068225006с#8331р7ееб8вғав */ 


П 5нА2 (<Строка>, <Длина бита результата>) -- возвращает шестнадцатеричное 
число. Во втором параметре можно указать значения 224, 256, 384, 512 ИЛИ 0 (ТО 
же самое, что 256): 


SELECT 5НА2("раззмога", 0); 

/* Выведет: 
5е8848984а280471514а0е56Ғ8ас6292773603а0а6аарраа62а11еҒ7214154248 
ку 


Для симметричного шифрования применяются следующие функции: 


С лЕ5 ЕМСВУРТ (<Строка>, <Ключ>) — принимает строку и секретный ключ и воз- 
вращает бинарную строку, зашифрованную по алгоритму AES; 


п АЕ$ РЕСВУРТ (<Зашифрованная строка>, <Ключ>) -- СЛУЖИТ ДЛЯ расшифровки 
строк, зашифрованных функцией лЕ5 ENCRYPT (): 
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SET Өту Кеу = 5НА2("Мой ключ", 512); 
SELECT АЕ5 ПЕСКҮРТ (АЕ5 ЕМСКҮРТ("раввмога", Өту Кеу), @пу Кеу); 


/* Выведет: password */ 


6.11.5. Информационные функции 


Приведем перечень информационных функций: 


П тевзтом() — выводит информацию о версии сервера: 


SELECT УЕВЗТОМ (); 
/% Выведет: 10.1.29-Магіарв */ 


О USER() — позволяет узнать имя пользователя и имя хоста текущего пользователя: 


SELECT О5ЕВ(); 
/* Выведет: root@localhost */ 


T 


o CURRENT_USER () -- выдает имя пользователя и имя хоста текущего пользователя 
в сессии: 


SELECT CURRENT О5ЕК() ; 
/% Выведет: root@localhost */ 


С DATABASE () — возвращает название текущей базы данных: 


SELECT DATABASE (); 
/% Выведет: tests */ 


O сом ECTION_ID() — возвращает идентификатор соединения: 


SELECT CONNECTION ТР о; 
/* Выведет: 12 */ 


O DEFAULT (<Имя поля>) — позволяет узнать значение по умолчанию для указанного 
ПОЛЯ: 


CREATE TABLE `пем table` ( 

“іс” INT AUTO INCREMENT, 
` INT DEFAULT 25, 

PRIMARY KEY (`іа`) 

) ENGINE=MyISAM CHARSET=utf8 COLLATE utf8_ general сі; 

TO `new_table` VALUES (NULL, 50); 

SELECT DEFAULT (`count`) FROM “пем бар1е` LIMIT 1; 

/* Выведет: 25 */ 


H 
о 
ІН 
ре] 

J 

3 
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п ТАЗТ ТМЗЕВТ 1р() — служит для определения последнего автоматически сгене- 
рированного значения для поля с атрибутом AUTO INCREMENT. Значение возвра- 
шается только в том случае, если перед вызовом функции было сгенерировано 
новое значение: 


INSERT INTO `new_table` VALUES (NULL, 80); 
SELECT ҺА5Т ІМБЕКТ ТР 1% 
/% Выведет: 2 */ 
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Вывести последнюю добавленную запись можно так: 


SERT INTO `пем table` VALUES (NULL, 30); 


SELECT `соцпі` FROM `new table` WHERE 7147 = LAST ІМЅЕАТ Ір(); 
/* Выведет: 30 */ 

С FOUND ROWS () — позволяет узнать число строк, которое возвратил бы оператор 
SELECT без инструкции LIMIT. 


Чтобы получить значение, необходимо в операторе SELECT указать опцию 


SQL CALC FOUND ROWS: 
INSERT INTO `new table` VALUES (NULL, 6), (NULL, 70), (NULL, 50); 
SELECT COUNT (*) FROM `new table`; 
/* Выведет: 6 */ 
SELECT SQL CALC FOUND ROWS `count` FROM `new table` LIMIT 0, 3; 
/% Выведет три записи: 50, 80, 30 */ 
SELECT FOUND ROWS (); 
/* Выведет: 6 */ 
С BENCHMARK (<Число повторений>, <501-запрос>) — выполняет SQL-sanpoc задан- 


ное число раз. Функция всегда возвращает значение 0. Применяется для опреде- 


ле 


SE 


ния быстродействия 5ОГ-запроса: 


/ж 
1 


ТЕСТ BENCHMARK (1000000, Мр5 ('строка')); 
Выведет: 0 
row іп set (0.26 sec) */ 


6.11.6. Прочие функции 


Также в $01 -запросах можно использовать следующие функции: 


п ТЕ (<Условие>, <Если Истина>, <Если Ложь>) -- функция для логического выбора. 
Если <Условие> истинно, то возвращается значение выражения <Если Истина>, 
в противном случае возвращается значение выражения <Если Ложь>: 


SELECT ТЕ(5>6, 'Больше', "Меньше"); 
/% Выведет: Меньше %/ 
ПІ CASE оператор для логического выбора. Имеет две формы записи: 


первая форма: 


САЗЕ <Переменная или выражение> 
WHEN <Значение 1> THEN <Выражение 1> 
[WHEN <Значение 2> THEN <Выражение 2>] 


[ELSE <Выражение>| END 


В зависимости от значения переменной (или выражения) выполняется один 
из блоков WHEN, в котором указано это значение. Если ни одно из значений не 
описано в блоках WHEN, то выполняется блок ELSE: 
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SELECT CASE 3 + 5 WHEN 8 THEN "Равно 8" 
ИН 
/% Выведет: Равно 8 */ 


4 


7 THEN "Равно 7" ELSE "Не смогли определить" END; 


е вторая форма: 


CASE ИНЕМ <Условие 1> THEN <Выражение 1> 
<Условие 2> THEN <Выражение 2>] 


z 
T 
Е 


ЗЕ <Выражение>| END 


Tj . 


Пример: 


SELECT CASE ИНЕМ 5>6 THEN 'Больше' ELSE "Меньше" END; 
/* Выведет: Меньше %/ 


п ІЕМІЛІ.(<Выражениеі>, <Выражение2>) — Позволяет заменить значения NULL дру- 
гими значениями. Если <Выражениеі> не равно NULL, ТО функция возвращает 
<Выражение1>. В противном случае функция возвращает <Выражение2>: 

ELECT IFNULL(5, 3); 

* Выведет: 5 */ 

ECT IFNULL (NULL, 3); 

* Выведет: 3 */ 


д мМ о М 0 
1. 


ULLIF (<Выражение1>, <Выражение2>) — функция для логического выбора. Если 
<Выражение1> равно <Выражение2>, возвращается значение NULL, в противном слу- 
чае возвращается <Выражение1>: 


SELECT NULLIF(5, 5); 
/* Выведет: NULL */ 
SELECT NULLIF(5, 3); 
/* Выведет: 5 */ 


о 


ЕТ АТОМ (<ІР-адрес>) -- представляет ІР-адрес в виде целого числа: 


SELECT I ET_ATON('127.0.0.1'); 
/* Выведет: 2130706433 */ 


С ІМЕТ МТОА (<ТР-адрес в виде числа>) — принимает ІР-адрес в виде целого числа 
и возвращает ІР-адрес в виде строки, состоящей из четырех цифр, разделенных 
точкой: 


SELECT ТМЕТ МТОА (2130706433); 
/* Выведет: 127.0.0.1 */ 


o СЕТ ТОСК (<Имя>, <Время ожидания ответа сервера) устанавливает блокировку 
с указанным именем. Функция возвращает 1 в случае успешной блокировки И 0, 
если время ожидания ответа сервера превысило величину, заданную в секун- 
дах параметром <Время ожидания ответа сервера>. Если произошла ошибка, TO 
функция возвращает NULL. Блокировка снимается тремя способами: 


® с помощью функции ВЕТЕАЗЕ_ТОСК (); 


® при повторном вызове функции GET_LOCK() (до версии 5.7.5); 


® при разрыве соединения с сервером. 
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Например: 


SEL 


ECT GET I 


/ж 
О 15. 


Выведет: 


FREE LOCK 


ОСК ( 'mylock', 5); 
1.90 
(<Ma блокировки>) — проверяет, свободна ЛИ блокировка с указан- 


ным именем. Функция возвращает 1, если блокировка свободна, и 0, если она 
занята: 


SEL 


/ж 
О 18. 


Выведет: 


USED LOCK 


ECT IS_FRI 


T 


ЕЕ LOCK ('mylock'); 
0: ж? 


(<Имя блокировки>) — проверяет, установлена ли блокировка с ука- 


занным именем. Если блокировка установлена, то возврашается идентификатор 
соединения клиента, который установил блокировку: 


SE 


ЕСТ IS_USI 


/ж 
SE 


ЕСТ CONNE 


Выведет: 


/ж 


Выведет: 


Ер LOCK ('mylock'); 
129%: 

СТІОМ Ір(); 

123 у 


Если блокировка не установлена, то возвращается значение NULL; 


П REL 


ВАЗЕ LOCK 


(<Имя блокировки>) — снимает блокировку с указанным именем. 


Если блокировка успешно снята, то функция возвращает 1. Если блокировка 
не может быть снята, то возвращается 0. Если блокировка с указанным именем 
не существует, то функция возвращает NULL: 


SELECT RELEASE LOCK ('mylock'); 
/* Выведет: 1 */ 
SELECT IS_USED_ LOCK ('mylock'); 
/% Выведет: NULL */ 
О UUID() — возвращает универсальный уникальный идентификатор — 128-раз- 


рядное уникальное число в виде строки, состоящее из пяти шестнадцатеричных 
чисел, разделенных символом -: 


SE 


ECT UUID( 


/ж 
SE 


Выведет: 


/ж 


ЕСТ UUID( 


Выведет: 


5 
86871720-с388-11е7-а8е7-9850е60с4са2 */ 
); 
8687а545-с388-11е7-а8е7-9850е60с4са2 */ 


Используемый алгоритм гарантирует глобальную уникальность возвращенного 
идентификатора; 


ОТ 


р 5НОВТ() 


ЕСТ UUID 


ж 


О сво 


U 
ряд 
5 
/ 


Выведет: 


ОР СОМСАТ 


ЦИИ: 


-- возвращает сокращенный уникальный идентификатор — 64-раз- 


ное уникальное число в виде строки: 


SHORT (); 
97391527101202432 */ 


() — объединяет отдельные значения в одну строку. Формат функ- 
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GROUP СОМСАТ ( [DISTINCT] 
[ORDER BY <Поле> [ASC | 
[SEPARATOR <Разделитель> 
) 


<Поле1> 
DESC] ] 
] 


Г, 


<ПолеМ>1| 
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Для примера создадим таблицу concat_table в базе данных tests: 


CREATE TABLE `сопсаї table` ( 
`id`ò INT NOT NULL AUTO INCREMENT, 
`counter` INT, 
PRIMARY KEY (`id`) 


) ENGINE=MyISAM CHARSET=utf8 COLLATE 

Затем добавим несколько записей: 

INSERT INTO `сопсаф table VALUES (NULL, 10); 
INSERT INTO `concat table VALUES (NULL, 20); 
INSERT INTO `concat table VALUES (NULL, 30); 
INSERT INTO `concat table VALUES (NULL, 40); 
INSERT INTO `concat table VALUES (NULL, 20); 


Теперь продемонстрируем 
значения поля coun 


ter: 
SEL 


/% Выведет: 


10,20,30,40,20 */ 


utf8 general сі; 


ECT GROUP СОМСАТ (`counter`) FROM `concat_table`; 


возможности функции GROUP СОМСАТ(). Выведем все 


А теперь выведем только уникальные значения, отсортированные в порядке 


убывания: 


SEI 
ЕКО 
/* Выведет: 


`concat_table`; 
40,30,20,10 */ 


ЕСТ GROUP СОМСАТ (DISTINCT `counter`ò ORDER ВУ 


`counter` 


DI 


ESC) 


И, наконец, выведем все значения поля counter больше 10 через разделитель "; ': 


SELECT GROUP СОМСАТ (DISTINCT `counter` 
ORDER BY `counter` ASC SEPARATOR "; ") 
FROM `сопсаї бар1Іе` WHERE `counter`ò > 10; 


/% Выведет: 20; 30; 40 */ 


6.12. Переменные $01 


Результат текущего запроса можно сохранить в переменной и использовать в по- 
следующих запросах в рамках одного сеанса. Присвоить значение переменной 


можно следующими способами: 


EL] 


ECT: 


O с помощью оператора 5 


SELECT @time := NOW(); 


/ж 
SE 


Выведет: 


/ж 


Выведет: 


2018-02-12 16:08:34 */ 


ЕСТ @time; 


2018-02-12 16:08:34 */ 
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ІНІ 
= 


O с помощью оператора 5! 


SET @Е1ме = МОИ () ; 
SELECT Q@time; 
/* Выведет: 2018-02-12 16:09:44 */ 


т] 


Объявление переменной начинается с символа ё, а сохранить значение в перемен- 
ной позволяет оператор :=. Обратите внимание, что в случае применения оператора 
SET вместо оператора :- можно использовать оператор =. 


В качестве примера создадим таблицу var_table в базе данных tests: 


CREATE TABLE `уаг table` ( 
`id`ò INT NOT NULL AUTO INCREMENT, 
“паше ргодиасе” VARCHAR (255), 
`count` INT, 
PRIMARY KEY (`id`) 
) ENGINE=MyISAM CHARSET=utf8 COLLATE utf8 general ci; 


Tone name product предназначено для хранения названия товара, а поле count слу- 
жит для обозначения количества товара на складе. 


Добавим несколько записей: 


INSERT INTO `уаг table VALUES (NULL, "Монитор", 10); 
INSERT INTO `var table VALUES (NULL, "Клавиатура", 20); 
INSERT INTO `var table VALUES (NULL, "Мышь", 30); 
INSERT INTO `уаг table` VALUES (NULL, "'Тюнер', 40); 
INSERT INTO `уаг жар1е” VALUES (NULL, 'HDD', 20); 


Сохраним В переменной минимальное количество товара на складе, а затем выве- 
дем название товара с минимальным количеством: 

SELECT @min := МІМ(“сойпЕ”) FROM `уаг table`; 

/* Выведет: 10 */ 

SELECT `name product FROM `уаг table` WHERE `count`ò = Өтіп; 


/% Выведет: Монитор */ 


Если запрос вернет более одного варианта, то в переменной сохранится только по- 
следнее значение: 


SELECT @min :- `count`ò` FROM `var_table`; 
/* Выведет: 

10 
20 
30 
40 
20 */ 

SELECT Өтіп; 

/% Выведет: 20 */ 
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6.13. Временные таблицы 


Временные таблицы создаются с помощью оператора CREATE TEMPORARY TABLE, CHH- 
таксис которого ничем не отличается от оператора CREATE TABLE. Временные табли- 
цы используются для реализации дополнительного поиска в результатах выполне- 
ния запроса. Заполнить временную таблицу можно обычным способом, но чаще 
всего это делают с помощью вложенных запросов. Следует помнить, что имя вре- 
менной таблицы действительно только в течение текущего соединения с сервером. 
После завершения соединения с сервером временная таблица автоматически удаля- 
ется. 


В качестве примера создадим таблицу user table B базе данных tests: 


CREATE TABLE `user table` ( 
“іа” INT МОТ NULL AUTO INCREMENT, 
`name` VARCHAR (255), 
PRIMARY KEY (`id`) 

) ENGINE=MyISAM CHARSET=utf8 COLLATE utf8 general сі; 


В поле name мы будем хранить фамилию и имя пользователя. Добавим в таблицу 


несколько записей: 

INSERT INTO `азег table` VALUES (NULL, "Иванов Сергей"); 
INSERT INTO `азег table` VALUES (NULL, "Иванов Николай"); 
INSERT INTO `user table` VALUES (NULL, "Иванов Иван"); 
INSERT INTO `user table` VALUES (NULL, "Петров Александр"); 
INSERT INTO `азег table` VALUES (NULL, "Петров Николай"); 
INSERT INTO `азег table` VALUES (NULL, "Иванов Максим"); 


А теперь инсценируем ситуацию поиска в найденном с помошью временных таб- 
лиц. Предположим, что первоначальный запрос пользователя выводит клиентов 
с фамилией Иванов: 


SELECT 7147, `раше` FROM `user table` WHERE “паше” LIKE "ФИванов%"; 


Сохраним результат запроса BO временной таблице, а затем выведем клиентов 
только с именем Николай: 

CREATE TEMPORARY TABLE `temp` 

SELECT 7147, `раше` FROM `user table` WHERE “паше” LIKE "ФИванов%"; 

SELECT `раше` FROM `Еешр` WHERE `паше` LIKE '%Николай%'; 

/% Выведет: Иванов Николай %/ 


È 


T 


Обратите внимание: при использовании вложенных запросов не нужно определять 
структуру временной таблицы. По умолчанию структура временной таблицы будет 
такой же, как и в результирующей таблице, но без индексов. Посмотреть структуру 
временной таблицы можно с помощью оператора EXPLAIN: 


CREATE TEMPORARY TABLE `temp2` 
SELECT 7147, “паше” FROM `user table` WHERE 
EXPLAIN `temp2`; 


`name` LIKE '%Иванов%'; 


T 


T 
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Удалить временную таблицу можно следующими способами: 


П спомощью оператора DROP TABLE: 


DROP TABLE <Имя временной таблицы>; 


O по завершении соединения с сервером временная таблица будет удалена автома- 
тически. 


6.14. Вложенные запросы 


Для изучения вложенных запросов создадим в базе данных tests следующие таб- 
лицы: 


o users _ table — для хранения данных о клиентах: 


CREATE TABLE `users_table` ( 
714 изег` INT NOT NULL AUTO INCREMENT, 
`name` VARCHAR (255), 
PRIMARY KEY (`іа user`) 
) ENGINE=MyISAM CHARSET=utf8 COLLATE utf8_ general сі; 


o product table — для хранения данных о товарах: 


CREATE TABLE `product_table` ( 
`id product`ò INT МОТ NULL AUTO INCREMENT, 
“паше ргодиасе” VARCHAR (255), 
PRIMARY KEY (`id product`) 

) ENGINE=MyISAM CHARSET=utf8 COLLATE utf8 general ci; 


o orders_table — ДЛЯ Хранения сведений о покупках: 


CREATE TABLE `orders_table` ( 
714 окдек” INT МОТ NULL AUTO INCREMENT, 
`id product` INT, 
714 user` INT, 
`count` INT, 
PRIMARY KEY (714 огаег`) 
) ENGINE=MyISAM CHARSET=utf8 COLLATE utf8 general ci; 


T 


T 


Добавим в таблицы несколько записей: 


INSERT INTO `users_table` VALUES (1, "Иванов"); 
INSERT INTO `users_table` VALUES (2, "Петров"); 


INSERT INTO `product_ table VALUES (1, "Монитор"); 
INSERT INTO `product table VALUES (2, "Клавиатура"); 
INSERT INTO `product table VALUES (3, 'Мышь'); 


INSERT INTO `orders_table` VALUES (1, 1, 1, 2); 
INSERT INTO `orders_table` VALUES (2, 3, 2, 5); 
INSERT INTO `orders_table` VALUES (3, 2, 1, 1); 
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6.14.1. Заполнение таблицы 
с помошью вложенного запроса 


При изучении временных таблиц мы уже использовали вложенный запрос для 
заполнения временной таблицы. Заполнять с помошью вложенного запроса можно 
не только временные таблицы, но и обычные таблицы, создаваемые посредством 
оператора CREATE TABLE. Создадим таблицу orders_item table с помощью вложен- 
ного запроса: 


CREATE TABLE `огаегз ісеп table` ( 

714 огаег` INT МОТ NULL AUTO INCREMENT, 
PRIMARY KEY (714 огаег`) 
) ENGINE=MyISAM CHARSET=utf8 COLLATE utf8 general ci 
SELECT `orders_table`.`id order А5 `id_order`, 
`users_table`.`name` А5 `user`, 


`product_table`.`name product`ò AS `name`, 
`orders_table`.`count`ò AS `count` 

FROM `users_table`, `product_table`, `orders_table` 

WHERE `orders_table`.`id userò = `users_table`.`id_user` AND 


`orders_table`.`id product = `product_table`.`id product`; 


Выведем структуру созданной таблицы с помощью 801 -запроса: 


EXPLAIN `orders_item table`\G 


Эта команда SQL выведет: 

АСА ЗЕ ЖСК АСЕ ЭССЕ ЖӘЕ ЭСЕ ое ЕЕ СЭС A Jrs row КЕКЕХККЖЕКККХЕКККЖЕКЖКЕКЖЕ ЖЕ a A 
Field: id_order 

Type: int(11) 

ull: NO 

Key: PRI 

Default: NULL 


Extra: auto_increment 
KRAER УА ЖӘ ЭСЕЗЕС ЕАС ХА ЕЕ Эх; row КАКА 


Field: user 

Type: varchar (255) 
ull: YES 

Key: 

Default: NULL 
Extra: 


ххххххххххххкхххххкххххххххкх 3 row ХХХ ХХХ ХХХ 


Field: name 

Type: varchar (255) 
111: YES 

Key: 

Default: NULL 
Extra: 
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хххххххххххххххххкхххххххккх 4 row ХХХ ХХХХХ ХХ Хе 


Field: count 
Type: int(11) 
ull: YES 
Key: 

Default: NULL 
Extra: 


Kak видно из результата, столбцы, не определенные в операторе CREATE TABLE, 
но имеющиеся в результирующей таблице, добавляются в новую таблицу. Если 
столбцы определены в операторе CREATE TABLE, НО отсутствуют во вложенном 
запросе, то они получают значение по умолчанию. 


Использовать вложенные запросы можно и в операторе INSERT. Создадим таблицу 
orders ібеп2 table обычным образом: 


CREATE TABLE `orders_item2_table` ( 
`id_order` INT NOT NULL AUTO INCREMENT, 
`user` VARCHAR (255), 
`name` VARCHAR (255), 
`count` INT, 
PRIMARY KEY (714 окаег`) 
) ENGINE=MyISAM CHARSET=utf8 COLLATE utf8_ general сі; 


Затем добавим записи с помощью оператора INSERT и вложенного запроса: 


INSERT IGNORE INTO `огдегѕ 16ет2 фар1е` 

SELECT `orders_table`.`id огдег` AS 714 огаег`, 
`users_table`.`name` А5 `user`, 

`product_table`.`name product`ò AS `name`, 
`orders_table`.`count`ò АЗ `count` 

FROM `users_table`, `product_table`, `orders_table` 

WHERE `orders_table`.`id userò = `users_table`.`id_user` AND 
`orders_table`.`id product = `product_table`.`id product`; 


Ключевое слово IGNORE сообщает серверу, что записи с повторяющимися значения- 
ми первичного ключа и уникальных индексов должны отбрасываться. Если не 
указать это ключевое слово, то при попытке вставить в таблицу повторяющуюся 
запись возникнет ошибка. 


Если мы хотим, чтобы записи с повторяющимися значениями ключа заменяли со- 
бой уже существующие в таблице записи, то применим оператор ВЕРТАСЕ: 


REPLACE INTO `orders_item2_table` 

SELECT `orders_table`.`id order А5 `id_order`, 
`users_table`.`name` А5 `user`, 

`product_table`.`name product`ò АЗ `name`, 
`orders_table`.`count`ò АЗ `count` 

FROM `users_table`, `product_table`, `orders_table` 

WHERE `orders_table`.`id userò = `users_table`.`id_user` AND 
`orders_table`.`id product = `product_table`.`id product`; 
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6.14.2. Применение вложенных запросов 
в инструкции WHERE 


Выведем имя пользователя, сделавшего заказ под номером 2, с помощью вложен- 
ного запроса: 


SELECT `name` FROM `users_table` 

WHERE `id userò = (SELECT `id userò FROM `orders_table` 
WHERI 
/* Выведет: Петров */ 


т] 


714 огаег` = 2); 


В этом примере мы объединили два запроса в один: внутренний запрос возвращает 
идентификатор пользователя, сделавшего заказ с номером 2, а внешний запрос по 
этому идентификатору получает имя пользователя. Как видно из примера, вложен- 
ный запрос всегда заключается в круглые скобки. 


Уровень вложенности запроса может быть более двух. Однако на практике запросы 
с уровнем вложенности более трех нецелесообразны, т. к. это приводит к увеличе- 
нию времени выполнения запроса. 


Если вложенный запрос возвращает более одного значения, то MySQL генерирует 
ошибку. Обойти эту проблему можно следующими способами: 


п указать ключевые слова IN или мот IN: 


SELECT “паше” FROM `users_table` 
WHERE `id изег` IN (SELECT `id userò FROM `orders_table`); 


Этот пример выведет: 


Иванов 
Петров 


О использовать ключевые слова ANY ИЛИ SOMI 


ЕК 


SELECT “паше” FROM `users_table` 
WHERE `id userò > ANY (SELECT `id userò FROM `orders_table`); 
/* Выведет: Петров */ 


o задать ключевое слово ALL: 
SELECT “паше” FROM `users_table` 

WHERE 714 изег` <= ALL (SELECT `id userò FROM `orders_table`); 
/% Выведет: Иванов */ 


При указании ключевого слова тм проверяется совпадение с одним из значений, 
возвращаемых вложенным запросом. При использовании ключевого слова NOT IN, 
наоборот, проверяется отсутствие совпадения со списком значений. Если применя- 
ется ключевые слова АМҮ или SOME, то проверяемое значение поочередно сравнива- 
ется с каждым элементом, и если хотя бы одно сравнение возвращает значение ис- 
тина, То результат попадает в итоговую таблицу. Если задано ключевое слово ALL, 
TO в результирующую таблицу попадут значения, только если все сравнения вернут 
значение Истина. 
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С помощью ключевого слова EXISTS можно проверить, имеется ли в результирую- 
шей таблице хоть одна строка. Если вложенный запрос дает непустой результат, то 
ключевое слово ЕХІ5Т5 возврашает 1 (истина). В противном случае возврашается 
значение 0 (ложь). Получить противоположные значения позволяет ключевое слово 
МОТ EXISTS. 


В качестве примера выведем фамилии всех клиентов, сделавших хотя бы ОДИН 
заказ. Для наглядности добавим В таблицу users_table еще одного клиента: 


INSERT INTO `users_table` VALUES (3, "Сидоров"); 


Теперь выполним такой запрос: 


SELECT “паше” FROM `users_table` 
W. E EXISTS (SELECT * FROM `orders_table` 
W. Е 


Б 


F 


НЕК 
НЕК 


`огдӢегѕ ёар1е`.`іа џѕег` = `users_table`.`id user`); 


В результате мы получим: 


Иванов 


Петров 


А теперь выведем фамилии клиентов, не сделавших ни одного заказа: 


SELECT “паше” FROM `users_table` 
WHERE NOT EXISTS (SELECT * FROM `orders_table` 
WHERE `orders_table`.`id userò = `users_table`.`id_user`); 


H 
H 


OTOT запрос вернет: 
Сидоров 


Обратите внимание: внутри вложенного запроса мы указываем поле таблицы 
`users_table`.`id userò из внешнего запроса. Такая связь называется внешней 
ссылкой, а сам запрос называется коррелированным вложенным запросом. 


6.14.3. Применение вложенных запросов 
в инструкции FROM 


Вложенные запросы можно использовать и в инструкции FROM. При ЭТОМ МЫ факти- 
чески выполним выборку данных, возвращенных вложенным запросом. 


Для примера давайте рассмотрим созданную в разд. 6.13 таблицу user table, хра- 
нящую список пользователей. Ранее для выполнения сложного поиска мы сначала 
перенесли предварительно отобранные записи во временную таблицу, в которой 
потом выполняли окончательный поиск. Но ту же операцию можно реализовать 
гораздо проще — указав в инструкции FROM вложенный запрос: 

SELECT “паше” FROM 

(SELECT `паше` FROM `user_table` WH 
WHERE `name` LIKE '%Николай%'; 


т] 


`name` LIKE '%Иванов%') AS `азегз` 


RE 


T 


/% Выведет: Иванов Николай */ 
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Здесь вложенный запрос выполняет предварительную выборку записей, включаю- 
ЩИХ СЛОВО Иванов. Основной запрос уже производит окончательный поиск записей, 
найденных вложенным запросом и хранящих слово Николай. 


Отметим, что для вложенного запроса всегда следует указывать псевдоним, приме- 
нив инструкцию AS. 


6.15. Внешние ключи 


При эксплуатации реляционной базы данных время от времени необходимо изме- 
нять ее структуру или удалять устаревшие данные. Например, для увеличения бы- 
стродействия можно удалить учетные записи клиентов, которые не совершали по- 
купок в течение определенного срока. Если просто удалить этих клиентов из одной 
таблицы, то это может привести к нарушению ссылочной целостности базы дан- 
ных, т. к. кто-нибудь из удаляемых клиентов наверняка совершал ранее покупки, а 
значит, сведения о покупке заносились в таблицу заказов. По этой причине при 
удалении клиента необходимо предварительно изъять все записи о совершенных 
им покупках из таблицы заказов. Сделать это можно с помощью двух SQL- 
запросов. Первый запрос удаляет записи из таблицы заказов, а второй — удаляет 
запись о клиенте. 


Для таблиц типа InnoDB предусмотрена возможность автоматического контроля над 
ссылочной целостностью базы данных с помошью внешних ключей. 


Внешний ключ указывает, что поле или комбинация полей текущей таблицы со- 
держат ссылку на другую таблицу. Его можно добавить при создании таблицы 
с помощью оператора CREATE TABLE, а оператор ALTER TABLE позволяет добавить 
внешний ключ в уже существующую таблицу. 


T 


N 


Добавляется внешний ключ с помошью конструкции FOREIG 
рукции: 

[CONSTRAINT [<Имя>] ] 

FOREIGN KEY [<Имя ключа>] (<Список полей в текущей таблице>) 


EY. Формат конст- 


REFERENCES <Имя внешней таблицы> (<Список полей во внешней таблице>) 
[ОМ DELETE <Действие>] 
[ОМ UPDATE <Действие>] 


В параметре <Действие> могут быть указаны значения: 


П CASCADE — удаление или изменение записи, содержащей первичный ключ, при- 
ведет к автоматическому удалению или изменению соответствующих записей 
в таблице-потомке; 


О SET мы, — при удалении или изменении записи, содержащей первичный ключ, 
соответствующие записи в таблице-потомке получат значение NULL; 


О RESTRICT — нельзя удалить или изменить запись, пока в таблице-потомке суще- 
ствуют ссылающиеся записи; 


О ҡо ACTION — то же самое, что и ВЕЗТВТСТ. 


Если действие не указано, это равносильно указанию действия RESTRICT. 
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Для примера создадим в базе данных tests следующие таблицы: 


п изегз Ғогеідп — для хранения данных о клиентах: 


CREATE TABLE `users_foreign` ( 
`id_user` INT NOT NULL AUTO INCREMENT, 
`name` VARCHAR (255), 
PRIMARY KEY (Cid user`) 
) ENGINE=InnoDB CHARSET=utf8 COLLATE utf8 general сі; 


T 


o product_foreign — для хранения данных о товарах: 


CREATE TABLE `product_foreign`ò ( 
`id product`ò INT МОТ NULL AUTO INCREMENT, 
“паше ргодиасе” VARCHAR (255), 
PRIMARY KEY (`id product`) 

) ЕМСІМЕ-ІппорВ CHARSET=utf8 COLLATE utf8_ general сі; 


o orders_foreign — ДЛЯ Хранения сведений о покупках: 


CREATE TABLE `orders_foreign` ( 
`id_order` INT NOT NULL AUTO INCREMENT, 
714 ргоаџосі` INT, 
`id_user` INT, 


`count` INT, 
PRIMARY KEY (714 огаег`), 
FOREIGN KEY (`іа user`) REFERENCES `users_foreign` (`1а user`) 


ẸRI: 


ON UPDATE CASCADE, 


T 


ON DELETE CASCADI 
F IGN KEY (`id product`) 

REFERENCES `product_foreign`ò (`id product`) 

ON DELETE RESTRICT ON UPDATE RESTRICT 

) ENGINE=InnoDB CHARSET=utf8 COLLATE utf8 general сі; 


Добавим в таблицы несколько записей: 


INSERT INTO `азегз Ғогеідп` VALUES (1, "Иванов"); 
INSERT INTO `азегз Еоге1одп` VALUES (2, 'Петров'); 


INSERT INTO “ргодисе Ғогеідп` VALUES (1, "Монитор"); 


INSERT INTO `product_foreign` VALUES (2, 'Клавиатура'); 
INSERT INTO `product_foreign` VALUES (3, "Мышь"); 


INSERT INTO `orders_foreign` VALUES (1, 1, 1 
INSERT INTO `огдӢегѕ Ғогеідп` VALUES (2, 3, 2, 5); 
INSERT INTO `orders_foreign` VALUES (3, 2, 1 


Теперь попробуем удалить господина Иванова из таблицы users_foreign: 


DELETE FROM `users_foreign` WHERE 714 user`=1; 


SELECT “паше” FROM `users_foreign`; 


/% Выведет: Петров */ 
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Посмотрим, сколько заказов осталось в таблице orders_foreign: 


SELECT COUNT (`1а окдег”) FROM `orders_foreign`; 
/* Выведет: 1 */ 


Как видно из этого примера, удаление господина Иванова привело K автомати- 
ческому удалению его заказов за счет применения ключевого слова CASCADE. Теперь 
попробуем добавить заказ на имя уже не существующего в базе данных господина 
Иванова: 


INSI 


ІН 


RT INTO `огдӢегѕ Ғогеідп` VALUES (NULL, 1, 1, 2); 


В итоге получим ошибку: 


ERROR 1452 (23000): Cannot add or update а child row: а foreign key 
constraint fails 


Попробуем удалить товар с номером з из таблицы product foreign: 


DELETE FROM `product_foreign` WHERE `id product`=3; 


В итоге также получим ошибку: 


ІІ 


ВВОВ 1451 (23000): Cannot delete or update а parent ком: а foreign key 
constraint fails 


Иными словами, пока мы не удалим заказ с номером 2 из таблицы orders_foreign, 
мы не сможем удалить товар C номером 3 из таблицы product_foreign. Это достига- 
ется за счет применения ключевого слова RESTRICT. 
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АУАХ. Обмен данными 
без перезагрузки У/ер-страницы 


7.1. Подготовка к загрузке данных 


AJAX (Asynchronous JavaScript апа XML, асинхронный JavaScript и XML) — это 
технология программной подгрузки произвольных данных для их вывода на стра- 
ницу (возможно, после обработки) или для использования в вычислениях. Про- 
грамма инициирует загрузку файла с данными, а потом считывает его содержимое 
и пускает в обработку, — и все это без перезагрузки самой страницы. 


Так можно загружать данные трех различных типов: 


С фрагменты НТМІ.-кода или обычного текста, которые мы можем просто вывес- 
ти на экран, вставив их в любой контейнер; 


O данные, закодированные с помощью языка XML. Понятно, что просто вывести 
их на экран нельзя, и нам потребуется раскодировать их и преобразовать в под- 
ходящий для вывода в составе страницы формат — НТМГ-код; 


С данные, закодированные в формате JSON (о нем речь пойдет чуть позже). Их 
также потребуется раскодировать и преобразовать в НТМГ-код. 


ВНИМАНИЕ! 


Технология AJAX позволяет загружать данные исключительно с Үуер-сервера. Загруз- 
ка из локальных файлов во всех У/ер-браузерах заблокирована в целях безопасности. 


Прежде чем загрузить какой-либо файл с применением технологии AJAX, нам сле- 
дует получить объект, который, собственно, и выполнит его загрузку. Процесс его 
получения различается в зависимости от используемого \еБ-браузера. 


7.1.1. Стандартный способ 


В Firefox, Chrome, Opera, Safari и Internet Explorer, начиная с его версии 7, загруз- 
кой данных «заведует» класс XMLHttpRequest. Этот класс поддерживается самим 
\!еБ-браузером и определен в стандарте РОМ, поэтому способ загрузки данных 
с его помощью носит название стандартного. 
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Нам нужно лишь создать объект упомянутого класса оператором пем. Никакие 
параметры при этом не указываются: 


var оАЈАХ = new XMLHttpRequest (); 


Класс XMLHttpRequest Также доступен через одноименное свойство объекта window. 


7.1.2. Способ, применяемый в Internet Explorer 5 и 6 


Однако в Internet Explorer версий 5 и 6 класс XMLHttpRequest не поддержива- 
ется. Вместо этого следует использовать полностью аналогичный класс 
Microsoft .ХМЬНТТР 


Пример создания объекта: 


var оАЈАХ = new ActiveXObject ("Microsoft .ХМЫНТТР") ; 


ВНИМАНИЕ! 


В дальнейшем, описывая реализацию технологии AJAX и говоря о классе 
XMLHttpRequest, мы будем иметь в виду также и класс МіскозоҒЕ.ХМІНТТР, ПОСКОЛЬКУ они 
полностью идентичны по своим возможностям. 


7.1.3. Универсальный способ 


На практике нам будет полезнее универсальный, кроссплатформенный способ, 
одинаково работающий во всех \!еБ-браузерах. Код, реализующий этот способ, 
приведен в листинге 7.1. 


Листинг 7.1. Кроссплатформенная загрузка данных 


if (window.XMLHttpRequest) { 
var оАЈАХ = new XMLHttpRequest (); 
} 
else { 
var оАЈАХ = new ActiveXObject ("Microsoft .XMLHTTP"); 


7.2. Отправка запроса 


Получив объект, реализующий технологию AJAX, мы можем отправить Web-cep- 
веру запрос на загрузку файла с данными. 


7.2.1. Синхронный или асинхронный запрос? 
Существуют две разновидности запросов на получение данных AJAX, которые мы 
можем отправить: 


С синхронный запрос, при котором УУер-браузер приостанавливает выполнение 
программы и ждет, пока файл с данными не будет получен; 
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С асинхронный запрос, при котором \еБ-браузер продолжает выполнять про- 
грамму, не дожидаясь получения запрошенного файла, а когда он, наконец, 
будет получен, генерирует особое событие (о нем мы поговорим далее). 


На практике чаще используются асинхронные запросы, т. к. они позволяют полу- 
чить данные по ходу выполнения прочего Јауа$Ѕсгірі-кода и, соответственно, не 
приводят к «зависанию» всей страницы. 


7.2.2. Задание параметров запроса 


Сначала нам следует указать параметры отправляемого запроса: метод отсылки 
данных (GET или POST), ОКІ -адрес файла с данными или программы, которая сгене- 
рирует эти данные, и вид запроса (синхронный или асинхронный). Все это выпол- 
HAET метод open () класса XMLHttpRequest: 


open (<Метод отправки данных>, <ОВ1-адрес>, <true | false>) 


<Метод отправки данных> указывается в виде строки "СЕТ" ИЛИ "POST". <ИВТ-адрес>, 
с которого запрашиваются данные, также указывается как строка. Если третьим 
параметром передано значение true, будет выполнен асинхронный запрос, если 
false — синхронный. Метод ореп () не возвращает результат. 


Приведем пару примеров: 


О задаем параметры синхронного запроса на получение файла fragment.html (нахо- 
дится в корневом каталоге сервера), в котором хранится фрагмент НТМГ-кода 
для вывода на страницу: 


ОАЈАХ.ореп ("СЕТ", "/fragment.html", false); 


С аздесь мы задаем параметры для асинхронного запроса на получение данных от 
программы search.php, причем входные данные для этой программы (они могут 
быть введены посетителем в специально предусмотренной для этого форме или 
сгенерированы скриптом) мы отошлем методом POST: 


ОАЈАХ.ореп ("РОЅТ", "search.php", true); 


7.2.3. Задание МІМЕ-типа отправляемых данных 


Если данные, которые мы собираемся подгрузить, генерируются выполняющейся 
на стороне сервера программой, она для работы может требовать какую-либо вход- 
ную информацию. Эта информация может как вводиться посетителем в специаль- 
ной форме, так и генерироваться скриптом. И отправить мы ее можем методом GET 
ИЛИ РО5Т. 


Если мы отправляем входные данные методом POST, то обязаны указать соответст- 
вующий МІМЕ-тип этих данных с помощью метода setRequestHeader() класса 
XMLHttpRequest: 


setRequestHeader (<Заголовок>, <Значение>) 
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Оба параметра этого метода указываются в виде строк. В нашем случае именем па- 
раметра станет строка "Content-Type" (именно этот параметр указывает МІМЕ-тип 
данных), а его значением — наименование нужного метода отправки данных: 


oAJAX.setRequestHeader ("Content-Type", 
"application/x-www-form-urlencodeqd") ; 


Метод setRequestHeader () не возвращает результат. 


7.2.4. Собственно отправка запроса 


Вот теперь мы можем, наконец, отправить запрос. Выполняется ОН вызовом Не воз- 
вращающего результат метода зепа() класса XMLHttpRequest: 
ОАСАХ.вепа(); 


7.2.5. Отправка данных с запросом 


Но как же отправить входную информацию для серверной программы, которая 
сгенерирует нам данные? Это зависит от метода отсылки входной информации, что 
мы указали первым параметром метода open (). 


Если входные данные отправляются методом GET, они просто добавляются к URL- 
адресу, указанному вторым параметром метода open (). Тогда метод ѕепа() вызыва- 
ется без указания параметров. 


Если входные данные отправляются методом POST, эти данные указываются в ка- 
честве единственного параметра метода зепа(). К запрашиваемому ЧВГ-адресу они 
в этом случае не добавляются. 


В качестве примера рассмотрим форму входа на сайт: 


<form id="frmLogin" action="login.php" 
enctype="application/x-www-form-urlencoded"> 
<р>Имя: <input type="text" name="login"></p> 
<р>Пароль: <input type="password" name="password"></p> 
<p><input type="submit" name="submit" уа1ае="Войти"></р> 
</form> 


По нажатию кнопки Войти будет выполнен следующий скрипт, который создаст 
строку sData с введенными в форму данными, закодированными соответствующим 
образом: 


var oForm = document.getElementById ("frmLogin"); 


var login = oForm.elements["login"].value; 

var password = oForm.elements ["раззмога"] .value; 

var sData = "login=" + encodeURIComponent (login) + "6"; 
sData += "password=" + encodeURIComponent (password); 


Тогда, чтобы отправить эти данные серверной программе методом GET, мы напи- 
шем такой екрипт: 


ОАЈАХ.ореп ("СЕТ", oForm.action + "?" + sData, true); 
ОАУАХ.вепа(); 
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А вот скрипт для отправки данных методом POST: 


ОАЈАХ.ореп ("РОЗТ", оҒокп.асбіоп, true); 
oAJAX.setRequestHeader ("Content-Type", "application/x-www-form-urlencodeqd"); 
oAJAX. send (sData) ; 


7.3. Получение данных 


Получив от нас АЈАХ-запрос на подгрузку данных, \!еБ-сервер либо отправит нам 
запрошенный файл, либо вызовет серверную программу, которая получит отправ- 
ленную нами входную информацию и сгенерирует результирующие данные, ко- 
торые, опять же, будут отправлены нам. Осталась мелочь — получить и обрабо- 
тать их. 


7.3.1. Назначение обработчика изменения статуса 


Сначала нам следует написать код, который будет обрабатывать полученные дан- 
ные, — иначе говоря, обработчик данных. Этот код можно оформить двумя спосо- 
бами. 


Обработчик в случае асинхронного запроса можно оформить в виде функции 
(обычной или анонимной), которую нужно присвоить свойству onreadystatechange 
класса XMLHttpRequest. Эта функция будет вызываться несколько раз при каждом 
изменении статуса обработки запроса. 


ВНИМАНИЕ! 

Присвоение функции-обработчика свойству onreadystatechange следует выполнять 
перед вызовом метода вепа(). Существует вероятность того, что запрошенные дан- 
ные загрузятся ранее, чем для них будет указан обработчик, и такую ситуацию лучше 
ИСКЛЮЧИТЬ. 


Пример: 


ОАЈАХ.ореп ("GET", "search.php?s=test", true); 

oAJAX.onreadystatechange = function() 1 
getData (оАЈАХ); 

}; 

ОАУСАХ. send (); 


Содержимое функции getData (): 


function getData (obj) { 
if ((obj.readyState == 4) && (obj.status == 200)) { 
console. log (obj .гезропзеТех®); 


} 


Если был выполнен синхронный запрос, код обработчика можно просто поместить 
после вызова метода send (): 
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ОАЈАХ.ореп ("СЕТ", "search.php?s=test", false); 

oAJAX. send (); 

if ((o0AJAX.readyState == 4) && (oAJAX.status == 200)) { 
console.log (oAJAX.responseText) ; 


7.3.2. Определение успешного получения данных 


Если мы используем первый способ оформления кода, который будет обрабатывать 
полученные данные, то должны приготовиться к тому, что событие 
onreadystatechange будет возникать всякий раз, когда изменяется состояние ожида- 
ния этих данных (когда запрос собственно отправляется, когда данные получены, 
но еще не обработаны, и др.). И еще нам следует иметь в виду, что \!еБ-сервер или 
серверная программа могут вернуть не только запрашиваемые нами данные, но и 
сообщение об ошибке. 


В рассматриваемом случае нам понадобятся следующие свойства класса 
XMLHttpRequest: 


П readyState — возвращает число, обозначающее состояние ожидания данных: 
e 0 — соединение с \!еБ-сервером еше не установлено; 
e 1 — соединение с \!еБ-сервером установлено; 
е 2 — вызван метод send (), доступны заголовки и статус; 
е 3--идет обработка загруженных данных; 
e 4 — данные обработаны и могут быть извлечены; 


О status — возвращает код ответа МеБ-сервера в виде числа, например, 200 (дан- 
ные успешно получены) или 404 (файл не найден). 


Пример: 


ОАЈАХ.ореп ("СЕТ", "search.php?s=test", true); 
oAJAX.onreadystatechange = function() { 
if ((oAJAX.readyState == 4) && (ОАЈАХ.ѕёаіцѕ == 200)) { 
console.log (oAJAX.responseText) ; 


}; 
ОАЈАХ.ѕепа(); 


7.3.3. Собственно получение данных 


Загруженные данные мы можем извлечь из свойства гезропзеТехе класса 
XMLHttpRequest. Эти данные представляют собой строку, хранящую фрагмент 
НТМЕ-кода или данные, закодированные в форматах XML или JSON. 


В листинге 7.2 приведен полный код, подгружаюший фрагмент НТМІ.-кода, воз- 
вращаемого скриптом ѕеагсћ.рһр (листинг 7.3), и выводяший его на страницу в KOH- 
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тейнере output. По нажатию кнопки Выполнить запрос мы будем отправлять чис- 
ло миллисекунд, прошедшее с 1 января 1970 г., и получать обработанные данные. 


Листинг 7.2. Пример загрузки с сервера фрагмента НТМЕ-кода 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<title>llpmmep загрузки с сервера фрагмента НТМІ-кода</6іЁ1е> 


<script> 
function handler () { 
var oAJAX = null; 
if (window.XMLHttpRequest) { 
oAJAX = new XMLHttpRequest (); 


else { 

ОАЈАХ = new ActiveXObject ("Microsoft .ХМЫНТТР") ; 
} 
if (!oAJAX) return; 
ОАЈАХ.ореп ("GET", "search.php?s=" + Date.now(), true); 


oAJAX.onreadystatechange = function() 1 
if (oAJAX.readyState == 4) { 
var oOutput = document .getElementById ("output"); 
if (oAJAX.status == 200) { 
oOutput.innerHTML = оАЈАХ.геѕропѕеТехі; 


} 


еізе { 


oOutput.innerHTML = "Ошибка"; 


}; 
ОАУАХ. send (); 
} 
</script> 
</head> 
<body> 
<div id="output"></div> 
<input type="button" уа1ае="Выполнить запрос" onclick="handler () "> 
</body> 
</html> 


Листинг 7.3. Содержимое файла search.php 


<?php 
1Ғ (isset ($ СЕТ['5'])) { 
$5 = Һішізресіаісһагв(5 СЕТ['5'], ЕМТ СОМРАТ | ЕМТ НТМЬ5, 'ОТЕ-8'); 
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echo "Получены данные: <р>' . $s . '</Ъ>'; 
} 
else ( 


есһо "Нет данных"; 


7.4. Формат JSON 


Ранее мы говорили, что данные, предназначенные для дальнейшей обработки, 
можно кодировать в формате JSON (JavaScript Object Notation, обьектная нотация 
JavaScript). Во многих случаях этот формат намного удобнее, чем XML, из-за его 
компактности и простоты обработки. 


7.4.1. Описание формата JSON 


Данные, закодированные в формате JSON, представляют собой строку с кодом, 
объявляющим объект класса Object. В свойствах этого объекта, собственно, и хра- 
нятся отдельные значения, составляющие массив закодированных данных. 


Здесь нужно помнить три момента: 
С в данных JSON имена свойств также берутся в кавычки; 


П значениями свойств не могут быть функции — т. е. в объектах, закодированных 
в JSON, могут присутствовать лишь свойства, но никак не методы; 


O данные JSON всегда сохраняются в кодировке ОТЕ-8. 
Приведем пару примеров: 
С преобразование данных JSON в объект: 
var data = '{ "id": "3.20.4", "title": "Формат JSON" }'; 
var ор) = JSON.parse (data) ; 


console.log (obj.id); 
console.log (obj.title); 


o кодирование целого массива данных: 


var даға = "1 "status": 1, "даға": [ {"1а": 1}, {"1а": 2} ] }'"; 
var ор) = JSON.parse (data) ; 

console. log (obj .status); 

console.log (obj.data[0].id); 

console. log (obj.data[1].id); 


Здесь свойство status хранит числовой код состояния (1 обозначает отсутствие 
ошибок при генерировании данных серверной программой), а свойство data — 
массив с данными. 
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7.4.2. Декодирование данных JSON: 

стандартный способ 

В новых \е-браузерах язык JavaScript поддерживает объект JSON. Метод parse () 
этого объекта выполняет декодирование данных JSON: 


025ОМ.рагзе(<Данные JSON>) 


Данные JSON передаются в виде строки (собственно, в виде строки мы и получим 
ИХ ИЗ свойства гезропвеТехе класса XMLHttpRequest). Метод возвращает сгенериро- 
ванный на основе этих данных объект класса Object: 
Егу { 

var оПаба = 25ОМ.рагве(оАУАХ.гезвропзеТех%); 

console.log (oData); 
} catch (e) { 

console.log ("Не удалось декодировать"); 


7.4.3. Декодирование данных JSON: 
способ, применяемый в устаревших Меб-браузерах 


Старые \!еБ-браузеры, в частности Internet Explorer 7 и более ранние его версии, 
не поддерживают объект JSON. Поэтому в них для декодирования данных JSON нам 
придется применять функцию еуа1(). Для корректной работы функции еуа1 () 
строку, содержащую объект JSON, необходимо взять в круглые скобки: 


Егу { 
var oData = еуа1 ('(' + оАЈАХ.геѕропѕеТехі + ')'); 
console.log (орафа) ; 

} catch (е) { 
console.log ("Не удалось декодировать"); 


7.4.4. Декодирование данных JSON: 
универсальный способ 


Чтобы скрипты, загружающие и обрабатывающие данные JSON, работали во всех 
\еб-браузерах, мы применим универсальный способ, написав следующий код: 


var орафа = null; 
if (JSON) { 

oData = JSON.parse (ОАЈАХ.геѕропѕеТехі); 
} 


else { 


oData = eval('(' + oAJAX.responseText + ')'); 
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В листинге 7.4 приведен полный код, подгружающий данные в формате JSON, B03- 
врашаемые скриптом веагсһ.рһр (листинг 7.5), и выводящий их на страницу в KOH- 
тейнере output. По нажатию кнопки Выполнить запрос мы будем отправлять чис- 
ло миллисекунд, прошедшее с 1 января 1970 г., и получать обработанные данные 
в формате JSON. 


Листинг 7.4. Пример загрузки и вывода данных 


<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<meta charset="utf-8"> 
<title>AJAX n JSON</title> 
<script> 


function handler () { 

var oAJAX = null; 
if (window.XMLHttpRequest) { 
oAJAX = new XMLHttpRequest (); 
} 
else { 
ОАЈАХ = new ActiveXObject ("Microsoft .XMLHTTP"); 
} 
if (!oAJAX) return; 
ОАЈАХ.ореп ("GET", "search.php?s=" + Date.now(), true); 


oAJAX.onreadystatechange = function() 1 
if (oAJAX.readyState == 4) { 
var oOutput = document.getElementById ("output"); 


if (оАУАХ.зғабаив == 200) { 
Егу 
var орафа = null; 
if (JSON) 1 
oData = JSON.parse (o0oAJAX.responseText) ; 
else { 
oData = еуа1('(' + оАЈАХ.геѕропѕеТехі + ')'); 


H =~ 


(oData.status == 1) { 
oOutput.textContent = oData.data; 


else { 
oOutput.textContent = "Получены ошибочные данные"; 

} 

} catch (е) { 
oOutput.textContent = "Не удалось декодировать"; 
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еізе ( 
oOutput.innerHTML = "Ошибка получения данных"; 


}; 
oAJAX. send (); 
} 
</script> 
</head> 
<body> 
<div id="output"></div> 
<input type="button" уа1ае="Выполнить запрос" onclick="handler ()"> 
</body> 
</html> 


Листинг 7.5. Содержимое файла search.php 


<?php 
// Запрет кэширования 

header ('Ехрігеѕ: Wed, 18 Oct 2017 23:17:32 СМТ"); 
header 


'Cache-Control: no-store, no-cache, must-revalidate! ); 
header ('Pragma: по-сасһе"); 


( 
( 
// МІМЕ-тип ответа сервера 
header ('Content-Type: application/json; charset=utf-8'); 


if (isset($_GET['s'])) { 
$s = htmlspecialchars ($ СЕТ["5'], ЕМТ СОМРАТ | ЕМТ НТМП5, "ОТЕ-8'); 
есһо 11 "status": 1, "даға": TI . 55. Tort; 

} 

else { 
echo '{ "status": 0, "data": "Нет данных" }'; 


7.4.5. Преобразование объекта в строку 
в формате JSON 


Преобразовать объект JavaScript в строку в формате JSON позволяет метод 
вегіпдіҒу(). Формат метода: 


JSON. stringify (<Объект> |, <Функция или массив>[, <Формат>11) 


В первом параметре задается объект, преобразуемый в строку в формате JSON. Во 
втором параметре можно указать массив с именами свойств, подлежаших преобра- 
зованию, или функцию, в которую будут передаваться два параметра: название 
свойства и его значение. Внутри функции нужно вернуть новое значение. Если 
функция возвращает значение undefined, то свойство не попадет в итоговую строку. 
По умолчанию в строке отсутствуют какие-либо разделители между свойствами 
и значениями. Этот разделитель можно указать в параметре <Формат>: 
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маг ор) = { "іа": "3.20.4", "title": "Формат JSON" }; 
console.log (JSON.stringify(obj)); 

// {"id":"3.20.4","title":"opmar JSON" } 

console.log (JSON.stringify (["Один", "Два"])); 

// ["Один", "Два"] 

console.log (JSON.stringify (obj, ["1а"], "")); 


// í 

A паи ада 

// } 

сопво1е.104(05О0М.вЕгіпдіҒу(ор), function (кеу, value) { 
if (key === "id") { 


return undefined; 


} 


return value; 


})); 
// "ісе": "Формат 9$0М" } 


7.4.6. Кодирование и декодирование данных 
в формате JSON в РНР 


Создать строку в формате JSON на основе массива в РНР позволяет функция 


јѕоп епсоде(): 


string јѕоп епсоде( mixed $value [, int $options = 0 |, 
int $depth = 512 11) 


В первом параметре указывается значение, подлежащее преобразованию, — Ha- 
пример, обычный или ассоциативный массив. Все строковые значения, присутст- 
вующие в кодируемом массиве, должны храниться в кодировке ОТЕ-8. Во втором 
параметре можно задать различные опции, а в третьем — максимальную глубину. 
Функция json епсоде() возвращает строку с закодированными данными или false, 
если при кодировании произошла ошибка: 


$Чаба = | 
"status" => 1, 
"data" => "Данные"]; 


echo json_encode ($data) ; 

//_{"status":1, "data" :"\u0414\u0430\u043d\u043d\u044b\u0435"} 
echo json_encode ($data, JSON ОМЕЗСАРЕР UNICODE) ; 

// {"status":1, "ава": "Данные" } 


Во втором параметре можно указать следующие опции или их комбинацию через 
оператор | (полный список опций смотрите в документации): 


С JSON HEX TAG— преобразовывать символы < и > в последовательности \u003C 
И Х1003Е; 


п ЈЅОМ НЕХ АМР — преобразовывать СИМВОЛЫ амперсанда & В последовательности 
\u0026; 
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С JSON НЕХ APOS — преобразовывать символы апострофа ' в последовательности 
\u0027; 


П 250 | НЕХ QUOT — преобразовывать символы двойных кавычек " в последова- 
тельности \u0022; 


O JSON FORC Е OBJECT — при кодировании списка возвращать объект, а не массив; 


а 


О JSON NU 


RIC CHECK — кодировать строки, содержащие числа, как числа; 


С зом РВЕТТУ PRINT — посредством пробелов форматировать возврашаемые дан- 
ные для удобства чтения; 


С 750М ОМЕЗСАРЕР ЗТАЗНЕ$ — не экранировать символы слеша; 


С JSON ОМЕЗСАРЕР UNICODE — не кодировать многобайтовые символы (по умолча- 
нию они преобразуются в последовательности вида \u<Kog символах). 


Вот пример указания нескольких опций: 


$data = [ 

"status" => 1, 

"data" => "Данные"]; 
echo json_encode ($data, JSON_PRETTY_PRINT | JSON ОМЕЗСАРЕР UNICODI 
IYA 

"statūs": 1, 

"data": "Данные" 


E 


ES 
` 


Выполнить обратное преобразование позволяет функция json decode (): 


mixed json десоде( string 53воп [, bool $assoc = false |, 
int $depth = 512 [, int $options = 0 ]]] ) 


В первом параметре задается строка в формате JSON. Если Bo втором параметре 
указано значение true, то результатом станет ассоциативный массив. Третий napa- 
метр задает максимальную глубину, а четвертый -- дополнительные опции. Функ- 
ция возвращает преобразованные данные или значение null в случае ошибки: 


$json = '{"status":1, "даба":"Данные"}'; 
ргіпе г()зоп decode ($) зоп)); 
И 
[status] => 1 
[data] => Данные 
) жу 


Выяснить, какого рода ошибка возникла при кодировании или декодировании дан- 
ных, можно вызовом функции json 1азЕ егког(). Она вернет одно из значений сле- 
дующих констант (полный их список смотрите в документации): 


никаких ошибок не ВОЗНИКЛО; 


О 7508 ЕВВОВ МОМЕ 


С JSON ЕВВОВ_РЕРТН — превышена максимальная глубина; 


С JSON_ERROR_STATE MISMATCH — некорректная структура данных; 
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С 2504 ЕВЕОВ CTRL CHAR — некорректный управляющий символ или неверная 
кодировка; 


О зом _ERROR_SYNTAX — синтаксическая ошибка; 


С зом ЕВЕОК 0ТҒ8 — некорректный символ ОТЕ-8 или неверная кодировка. 
Теперь еще два момента: 


С во-первых, нам следует задать в качестве МІМЕ-типа отправляемых данных 
application/json, поставив в самое начало скрипта строку: 


header ('Content-Type: application/json; charset=utf-8'); 


o во-вторых, настоятельно рекомендуется отключить кэширование отправляемых 
данных на стороне клиента. 


В качестве примера изменим код, который приведен в листинге 7.5 (листинг 7.6). 


Листинг 7.6. Генерирование данных JSON 


<?php 
// Запрет кэширования 

header ('Ехр1гез: Wed, 18 Oct 2017 23:17:32 СМТ'); 
header 


("Сасһе-Сопіго1: no-store, no-cache, must-revalidate'); 
header ('Pragma: по-сасһе"); 
// MIME 
header ('Content-Type: application/json; charset=utf-8'); 
if (isset($_GET['s'])) { 
$s = htmlspecialchars ($ СЕТ["5'], ЕМТ СОМРАТ | ЕМТ НТМІ5, 
"ОТЕ-8'); 
$data = | "status" => 1, "data" => $s]; 
$јѕоп = јѕоп епсоае ($data) ; 
if ($јѕоп !-- false) { 


-тип ответа сервера 


echo $јзоп; 
} 
еізе { 
echo json епсоае([ "status" => 0 1); 


} 
еізе ( 
echo json епсоае([ "status" => 0 1); 


Если в процессе кодирования данных произошла ошибка, мы отправляем клиент- 
скому скрипту массив с элементом status, имеющим значение 0. Тем самым мы 
сообщим ему об ошибке. 


Не забываем, что данные, имеющие формат JSON, должны быть в кодировке (/ТЕ-8. 
В связи с этим нам придется сохранить в кодировке ОТЕ-8 (обязательно без BOM!) 
и сами страницы, выводящие данные JSON на экран, и РНР-скрипты, генерирую- 
щие эти данные. 


ПРИЛОЖЕНИЕ 


Описание электронного архива 


Электронный архив с материалами, сопровождаюшими книгу, можно скачать 


с ЕТР-сер 


вера издательства по ссылке Ир://Ёр.6Ву.ги/9785977539869.71р или со 


страницы книги на сайте www.bhv.ru. 


Архив имеет следующую структуру: 


O папка Listings: 


е файл HTML.doc — все листинги главы 1 «Основы HTML 5. Создаем дизайн 
сайта»; 


e файл С55.аос — все листинги главы 2 «Основы CSS 3. Форматируем Web- 
страницу с помощью стилей»; 


е файл JavaScript.doc — все листинги главы 3 «Основы JavaScript. Создаем 
страницы, реагирующие на действия пользователей»; 


е файл Зешр.4ос — все листинги главы 4 «Программное обеспечение Web-cep- 
вера. Устанавливаем и настраиваем программы под Windows»; 


е фай: 
Web 


e фай 


л PHP.doc — все листинги главы 5 «Основы РНР. Создаем динамические 
-страницы»; 


л MySQL.doc — все листинги главы 6 «Основы MySQL. Работаем с базами 


данных»; 


е файл AJAX.doc — все листинги главы 7 «AJAX. Обмен данными без перезагрузки 


Web 
O файл P 


-страницы»; 


гасісе.4ос — дополнительная глава «Сплошная практика. Создаем дина- 


мический сайт»; 


П папка Site — содержит все файлы листингов главы «Силошная практика. Создаем 
динамический сайт»; 


O файл Readme.txt — описание электронного архива. 


Настоятельно рекомендуем обязательно рассматривать все примеры из книги и 
вначале самостоятельно набирать код. При наборе вы создадите множество оши- 


бок. Имен 


но умение находить эти ошибки сделает из вас настоящего \!еБ-мастера. 


При отсутствии программы MS Word открыть прилагаемые файлы можно с помощью 
бесплатного текстового редактора Writer пакета LibreOffice (В рз://га.ИБгеойсе.ого/). 
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$ СООКІЕ 458 

% ЕМУ 458 

$_FILES 458, 687 

$ СЕТ 458 

$_POST 458 

$ ВЕООЕЗТ 458, 460, 704 
$ ЗЕВУЕК 458, 702 


$СГОВАГ$ 461, 591 
$this 592, 611, 623, 647 


@ 


@charset 94 
@font-face 114 
@import 96, 198 
(@КеуНатез 183 
(дтейіа 198 


__ саП0 611, 626 
__callStatic() 619, 626 

__ с1опе() 607 

__ construct() 611 

_ аебатЮ() 625 

__ destruct() 612 

_ ЕШЕ_ 457 

__ век) 608, 626 

_ іпуоКе() 625 

_ 15е) 627 

ИМЕ 457 

_ NAMESPACE 601 

_ РНР Іпсотіріе(е Сіа5 642 
__ зе 608, 609, 626 

_ Зеер( 627, 643 
__toString() 611, 624, 664 
__unset() 627 

__ маКечро 627, 643 
_blank 54, 63 


_ рагеп 63 
_ зе! 63 
_ юр 63 


< 


<!БОСТҮРЕ> 32 
<а> 52,54,62,701 
<abbr> 44 
<агеа> 65 
<article> 39 
<аз14е> 39 
<audio> 86 

<b> 43 

<base> 33, 54 
<blockquote> 38 
<body> 35 

<br> 42, 119 
<button> 81, 364 
<canvas> 52, 371 
<caption> 58 
<cite> 44 
<code> 44 

<col> 59 
<colgroup> 59 
<datalist> 76 
<dd> 48 

<del> 43 
<details> 41 
<dfn> 44 

<div> 38 

<dl> 48 

<dt> 48 

<em> 43 
<fieldset> 85 
<figcaption> 39 
<figure> 39 
<footer> 39 
<form> 68, 74, 350 
<frame> 60 
<frameset> 60 
<ҺІ>- <һ6>37 
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<head> 32 
<феа4ег> 39 

<hr> 41 

<html> 32 

<і> 43 

<iframe> 60, 62, 63 
<img> 48, 51, 65 
<input> 68, 70, 73, 722 
<ins> 44 

<kbd> 44 

<label> 82 
<legend> 85 

<li> 45—47 

<link> 33, 95, 198 
<main> 39 

<map> 65 

<mark> 39, 44 
<meta> 33, 34 
<meter> 85 

<nav> 39 
<noframes> 60 
<noscript> 204 
<ol> 46, 47 
<optgroup> 80 
<option> 76, 80 
<p> 37 

<picture> 50, 51 
<pre> 43 
<progress> 85 

<q> 44 

<s> 43 

<samp> 44 
<script> 33, 203, 205-207 
<section> 39 
<select> 68, 79, 723 
<small> 44 
<source> 50, 88 
<span> 45 
<strong> 43 
<style> 33, 92, 198 
<sub> 44 
<summary> 41 
<sup> 45 

<svg> 51 

<table> 57 

<td> 59 
<textarea> 68, 77, 722 
<th> 59 

<time> 44 

<title> 33 

<tr> 58 

<track> 88 

<u> 43 

<ul> 45 

<var> 44 

<video> 87 

<wbr> 121 


887 


A 


AAC 86 

abs() 240, 487 

ABS() 836 

absolute 152 

abstract 616, 617 
Accept 76, 694, 697 
Accept-Encoding 694, 697 
Accept-Language 694, 697 
access.log 419 
AccessFileName 420 
accesskey 83 

accuracy 391 

acos() 241, 488 

ACOS() 834 

Action 68, 350, 351, 416 
activeElement 334 
ADD 782 

ADD PRIMARY KEY 782 
add() 571 

AddCharset 412 
addColorStop() 380, 381 
addcslashes() 825 
ADDDATE() 844, 846 
AddDefaultCharset 412 
AddDescription 418 
AddEncoding 414 
addEventListener() 315 
AddHandler 414 
AddIcon 417 
AddIconByEncoding 418 
AddIconByType 418 
AddLanguage 412 
addRange() 343 
addslashes() 534 
ADDTIME() 846 
AddType 414 
AES_DECRYPTO) 855 
AES ЕМСКҮРТ() 855 
AGAINST 831 

AJAX 871 

alert() 209, 330 

Alias 143, 413 
AliasMatch 413 

align 37, 41, 57, 58 
align-content 160, 171 
align-items 161, 172 
align-self 161, 172 
alink 36 

all 34, 96, 198 

АП 409, 421, 773, 866 
ALL PRIVILEGES 773 
Allow 426 
allow_url_fopen 707 
allowed_classes 642 
allow-forms 61 
allow-modals 61 
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allow-orientation-lock 61 
AllowOverride 420 
allow-pointer-lock 61 
allow-popups 61 
allow-presentation 61 
allow-same-origin 61 
allow-scripts 61 
аШоуу-іор-пауісайоп 61 
all-scroll 143 

alt 49, 66, 70 

АТТЕК 774 

ALTER TABLE 781 

alternate 185 
alternate-reverse 185 

altitude 391 

altitudeAccuracy 391 

altKey 327 

ANALYZE TABLE 793 
anchorNode 342 
anchorOffset 342 

AND 780, 822 

AND CHAIN 808 

AND NO CHAIN 808 
animation 183, 187 
animation-delay 184 
animation-direction 185 
animation-duration 184 
animation-fill-mode 186 
animation-iteration-count 185 
animation-name 184 
animation-play-state 186 
animation-timing-function 185 
ANY 866 

Apache 395, 406 

apache гедиеѕі һеайегѕ() 702 
арасһе теѕропѕе һеайегѕ() 703 
аррСодеМате 332 
appendChild() 337 
application/x-www-form-urlencoded 69 
арріу() 289 

аррХате 332 

аррУегѕіоп 332 

Aptana Studio 26 

агс() 378 

arcTo() 377 

arguments 289 

armenian 139 

Array 246, 452, 584 

array() 494, 496 
array_combine() 499 
array_diff() 513 
агау Фі Кеу() 514 
аггау аі «Кеу() 514 

аттау Ё) 510 
атау НИ Кеуѕ() 499 
array_filter() 514 
АВКАУ ЕПЛЕВ 1/5Е ВОТН 514 
ARRAY ЕПЛЕВ 08Е КЕҮ 514 
аттау іпіегѕесі() 513 
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аттау іпіегѕесі Кеу() 514 
аггау іпіегвесі иКеу() 514 
array_key_exists() 496 
аггау Кеуѕ() 497 

аггау тар() 515 

аггау тегое() 499, 513 
аггау раа() 494 

аггау рор() 504 

аггау риѕћ() 504 

аггау геуегѕе() 505 

аггау ѕеагсһ() 512 
array_shift() 504 

аггау 51ісе() 508 

аттау ѕрісе() 508 

аггау ойі) 513 

аггау шіпќегѕесі() 513 
атау ипідие() 512 
array_unshift() 504 

аггау уаіџеѕ() 497, 505 
array_walk() 503 
Arraylterator 645 

arsort() 506 

аз 603, 649, 650, 868 
Ascending 418 

ASCII 520 

А8СЦ( 852 

авіп() 241, 488 

ASINO) 834 

asort() 506 

aspect-ratio 200 

assign() 333 

азупс 204 

аќап() 241, 488 

АТАМО 834 
attachEvent() 316 

айгО 105 

attributes 340 
AuthConfig 421 
AuthGroupFile 421 

Аи Мате 421 
AuthType 421 
AuthUserFile 421 

ашо 116, 123, 132, 141, 142, 147, 148, 154, 161, 173 
АОТО ІМСКЕМЕМТ 775, 776, 778, 790, 856 
ашосоттіќ 807 
autocommit() 814 
autocomplete 69, 73, 76, 78, 352, 365 
auto-fill 163 

auto-fit 163 

autofocus 73, 78, 79, 82, 365 
autoplay 86, 87, 369 
availHeight 333 
availWidth 332 

АУС() 783 


В 


БасК() 334 
backface-visibility 196 
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background 36, 50, 133, 142 border-right-color 126 
background-attachment 131, 133 border-right-style 124 
background-clip 133 border-right-width 126 
background-color 130, 133, 142 border-spacing 140 
background-image 130, 133 border-style 125 
background-origin 132 border-top 127 
background-position 131, 133 border-top-color 126 
background-repeat 130, 133 border-top-left-radius 127 
background-size 132 border-top-right-radius 127 
backwards 186 border-top-style 124 
badInput 366 border-top-width 126 
balance 173 border-width 126 

Һаве сопуег() 491 both 79, 149, 150, 187 
Ваве64 538, 718,719 ВОТН 850 

Баѕеб4 4есойе() 718 bottom 58, 116, 131, 141,152 
Бавеб4 епсойе() 718 box-shadow 176, 177 
baseline 116, 161 box-sizing 146 

Баѕепате() 685 break 229, 234, 478, 480, 485 
Basic 421 break-all 121 

Беріп transaction() 814 break-word 121 
beginPath() 377 brightness() 175 
ВЕМСНМАВКО 857 bubbles 321 

BETWEEN 780, 820 button 70, 82, 326 
БеліегСшуеТо() 378 

bgcolor 36, 50, 57, 58 С 

BIGINT 770 

ВІМ() 835 Cache-Control 700 
BINARY 771, 822, 824 CacheNegotiatedDocs 416 
Ыпдес() 489 саіс() 98 

ВІТ 770 call() 288, 289 

ВІТ І.ЕМОТН() 850 callable 584, 594 

BLOB 771 сапсе!аЫе 318 

block 145 сапсе!ВиБЫе 321 

blur() 175, 353, 357, 361, 363 сапРІауТуре() 370 

Боду 334 сапуаз 372 

bold 113 CanvasGradient 380, 381 
bolder 113 СапуавРайетп 381 

ВОМ 443 СапуавКелдегіпеСошехі2 372 
bool 452, 583 capitalize 118 

BOOL 770 сарНоп 88, 338 

boolean 214, 452 caption-side 58, 141 
ВООГЕАМ 770 СА5САРЕ 868, 870 
boolval() 454 сазе 229, 477, 478 

border 57, 127, 140 САЗЕ 857 

border-bottom 127 СА8Т() 824 
border-bottom-color 126 catch 312, 659-661, 663, 665 
border-bottom-left-radius 127 се) 240, 488 
border-bottom-right-radius 127 СЕП) 835 
border-bottom-style 124 СЕПЛМО( 834 
border-bottom-width 126 сей 143 

border-box 132, 133, 147 cellpadding 57 
border-collapse 124, 140 cells 338 

border-color 127 cellspacing 57 

border-left 127 center 115, 116, 131, 160, 161, 170, 171 
border-left-color 126 cgi-bin 405 
border-left-style 124 cgi-script 415 
border-left-width 126 ch 98 

border-radius 128 СНАМСЕ 782 


border-right 127 chapters 88 
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CHAR 770 со!огОер 333 

СНАК() 852 color-index 200 

CHAR LENGTH() 849 col-resize 143 
CHARACTER SET 775 cols 77 
CHARACTER_LENGTH() 849 colspan 59 
character зеё пате() 797 column 156, 165 

charAt() 263 column-count 173 
charCode 327 column-fill 173 
charCodeAt() 263 column-gap 173, 174 
charset 33 column-reverse 156 
Charset 417 column-rule 174 
CHARSET 776 column-rule-color 174 
СНАВЗЕТ() 854 column-rule-style 174 
chdir() 689 column-rule-width 174 
checkbox 70, 724 columns 173 

checkdate() 568 column-width 173 
checked 75, 361 combined 420 
checkValidity() 352 Command Line Client 816 
childNodes 336 COMMENT МОРЕ 336 
chmod() 684 COMMIT 807, 808 
chop() 533 commit() 814 

chr() 520 common 419, 420 

circle 65, 137, 138 commonAncestorContainer 345 
cite 38, 43 compact() 509 

CKEditor 25 compareBoundaryPoints() 345 
class 89, 93, 302, 339, 605 complete 334, 367 
class_alias() 630 completion_type 808 
class_exists() 630 COMPRESS() 854 
className 339 concat() 250, 850 

clear 150 СОМСАТ_\/5() 850 
clearInterval() 284 confirm() 209, 330 
сІеагКес(() 374 соппесі еггпо 795 
сісагТітеош() 284 соппесі еггог 795 
clearWatch() 393 СОММЕСТІОМ 1р() 856 
clientX 325 const 215, 456, 617 
clientY 325 constant() 457 

clip 149 сопвігисіог() 302 

clip() 379 contain 132 

сІопе 606 content 34, 105 
сІопеСопѓепіѕ() 345 content-box 132, 133, 146 
сіопеХойе() 337 Content-Length 695, 697, 709 
с1опеКапэе() 345 Content-Type 33, 695, 697, 709, 718, 719 
сІоѕе() 794, 797 context-menu 143 
closedir() 690 continue 234, 484 
сІоѕеРаіћ() 377 contrast() 176 

close-quote 105 controls 86, 87, 369 
сІоѕеѕі-согпег 137 СОМУ( 835 

сІоѕеѕі-ѕійе 137 СОМУЕКТО 824 
Closure 593 сопуегі суг ѕігіпо() 524 
ст 98 СОМУЕЕТ Т7() 847 
сойе 392 Cookie 334, 347, 697 
соПарзе 124, 140, 154 cookieEnabled 332, 347 
соПарзе() 342, 345 Cookies 347, 703 
collapsed 344 Coordinates 391 
соПарѕеТоЕпа() 343 coords 66, 391 
collapseToStart() 343 сору 143 

COLLATE 775, 776 сору( 685 
СОГГАТЮМО 854 сов() 241, 488 


color 72, 112, 200 COS() 834 
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COTO) 834 

count() 480, 495, 501 

СОПМТ() 783 

counter() 105 

counter-increment 106 
соищег-гезе 106 

соуег 132 

ср866 524 

СКЕАТЕ 774 

CREATE DATABASE 772 
CREATE FULLTEXT INDEX 831 
CREATE INDEX 791 

CREATE TABLE 775, 864 
CREATE TEMPORARY TABLE 862 
CREATE TEMPORARY TABLES 774 
CREATE UNIQUE INDEX 791 
CREATE USER 774 
createCaption() 338 
createElement() 337 
createFromFormat() 570 
сгеаіеітарераѓа() 385 
createLinearGradient() 380 
createPattern() 381 
createRadialGradient() 380 
createRange() 344 
createTextNode() 337 
createTFoot() 338 

createTHead() 338 

CROSS JOIN 787 

crosshair 142 

CSS 91 

С55-селекторы 101 

CSV 681 

ctrlKey 327 

cubic-bezier() 180 

CURDATE() 839 

CURL 713 

curl _close() 714 

curl _errno() 715 

curl _error() 715 

curl ехес() 715 

curl рейпѓо() 715 

curl _init() 714 

curl _setopt() 714 
CURLOPT_CONNECTTIMEOUT 714 
CURLOPT_COOKIE 715 
CURLOPT FILE 715 
CURLOPT_FOLLOWLOCATION 715 
CURLOPT_HEADER 714 
CURLOPT_HTTP_VERSION 714 
CURLOPT_HTTPGET 714 
CURLOPT_HTTPHEADER 715 
CURLOPT_MAXREDIRS 715 
CURLOPT_NOBODY 714 
CURLOPT_PORT 714 
CURLOPT_POST 714 
CURLOPT_POSTFIELDS 715 
CURLOPT_REFERER 715 
CURLOPT_RETURNTRANSFER 714, 715 
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CURLOPT_STDERR 715 
CURLOPT_TIMEOUT 714 
CURLOPT_URL 714 
CURLOPT_USERAGENT 714 
CURLOPT_WRITEHEADER 715 
currency 242 

currencyDisplay 242 

current() 502, 595, 646 
CURRENT_DATE() 839 
CURRENT_TIME() 839 
CURRENT _USER() 856 
currentSre 368 

currentTarget 317 

currentTime 369 

cursive 112 

cursor 142 

CURTIME() 839 

customError 366 

CustomLog 419 


D 


dashed 118, 124 

data 385 

data ѕеек() 803 
ааѓќа-<Имя> 90 
РАТАВАЗЕ() 856 

date 72, 76 

Date 279, 280 

DATE 771 

date() 565, 840 
date.timezone 430, 564 
DATE_ADD() 844 
date_default_timezone_get() 564 
date _default_timezone_set() 563 
РАТЕ_ЕОВМАТО 847 
DATE_SUB() 844 
DATEDIFF() 846 
DateInterval 571 

datetime 43, 44 

DateTime 569, 572 
DATETIME 771 
datetime-local 73 

DAY() 840 

DAYNAME() 843 
DAYOFMONTH() 840 
DAYOFWEEK() 843 
DAYOFYEAR() 843 
decbin() 491 

dechex() 491 

decimal 138 

DECIMAL 770 
decimal-leading-zero 138 
declare 599 

declare() 584 

decoct() 491 

decodeURI() 267 
decodeURIComponent() 268 
default 65, 88, 142, 229, 477 
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DEFAULT 775 
РЕЕАОГТО 856 
default_charset 429, 521, 522, 534 
default _socket_timeout 710 
defaultChecked 361 
default-handler 415 
DefaultIcon 418 
DefaultLanguage 412 
defaultPrevented 318 
defaultSelected 357 
defaultValue 353 

defer 204, 207 

Define 410 

define() 456 

defined() 457 

deg 100 

deg2rad() 489 

DEGREES() 837 

DELETE 773, 781 
deleteCaption() 338 
deleteCell() 339 
deleteContents() 345 
deleteFromDocument() 343 
deleteRow() 339 
deleteTFoot() 338 
deleteTHead() 338 

deltaX, deltaY, deltaZ 326 
dense 165 

Deny 426 

DESC 782 

Descending 418 
DESCRIBE 778, 788 
description 33, 88 
DescriptionWidth 416 
detach() 345 

detachEvent() 316 

detail 326 

die 451, 657 

а) 572 

dir 156 

Directory 407 

DIRECTORY ЅЕРАКАТОК 691 
Пігесісгуіпдех 405, 416 
ПігесіюгуМа(сһ 407 
Фігпате() 685 

disabled 71, 78-82, 353, 357, 361, 363 
Disallow 35 

disc 138 

display 40, 139, 145, 154, 156, 162 
display_errors 429, 431, 656 
do...while 232, 482 
document 205, 330, 334, 335, 344, 347,351 
РОСУМЕМТ МОРЕ 336 
DOCUMENT_ROOT 459 
documentElement 334 
DocumentFragment 345 
DocumentRoot 408 

Dojo 211 

ром 329 
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dotted 118, 124 

double 118, 124, 452, 486 
DOUBLE 770 
doubleval() 454 
download 52, 701 
drawImage() 376 

DROP 774, 782 

DROP INDEX 791 
DROP PRIMARY KEY 782 
DROP TABLE 793, 863 
DROP USER 775 
drop-shadow() 176, 177 
duration 369 


E 


E 239 

E_ALL 655 

E_NOTICE 657 
E_USER_NOTICE 657 
ease 180 

ease-in 180 

ease-in-out 180 
ease-out 180 

echo 440, 445, 461 
ELEMENT МОРЕ 336 
elementFromPoint() 335 
elements 351 

ellipse 136 

ellipsis 149 

else 473 

elseif 473 

ELT) 852 

em 98 

email 71 

empty() 455, 627 
empty-cells 142 
enableHighAccuracy 392 
encodeURI() 267 
encodeURIComponent() 267 
encoding 351 

enctype 69, 351, 352, 686 
end 116, 170, 171 

end() 502 
END_TO_END 346 
END_TO_START 346 
endContainer 344 

ended 369 

endOffset 344 
endsWith() 266 
ENGINE 776 
NT_COMPAT 534 
NT_HTML401 534 
NT_HTML5 534 
NT_IGNORE 534 
NT_NOQUOTES 534 
T_QUOTES 534 

Т SUBSTITUTE 534 
Т ХНТМІ. 534 


шее 


Z 2 2, 
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ЕМТ ХМІЛ 534 

ЕМОМ 771 

EPSILON 237 

e-resize 143 

еггог 688 

Error 659, 661, 664 
error.log 419 

error_log 431, 656 
error_reporting 430, 654-656 
еггог терогіпе() 655, 728 
ErrorDocument 413 
ErrorLog 420 

ЕСЕ 848 

еуа(0) 268, 765, 879 

event 315, 317 
eventPhase 322 

еуегу() 255 

ех 98 

Exception 661, 664, 666 
ехес() 271, 519 

ЕхесССІ 409 

ЕХІЕ 740 

ех! ітареѓуре() 741 

exif read 4а(а() 741 

exif _thumbnail() 742 

exit 450 

exp() 240, 488 

ЕХР() 836 

expires 347 

Expires 700 

EXPLAIN 778, 788, 862 
ехріойе() 536, 537 
expose_php 703 

extend() 343 

extends 303, 638 
extension_dir 429 
ЕХТЕ Е ЕХІЅТ 509 
ЕХТК ОУЕКУУЕТТЕ 509 
ЕХТК _ PREFIX ALL 509 


EXTR_PREFIX ІЕ ЕХ!ЗТ$ 509 


ЕХТК РКЕҒГІХ INVALID 509 
ЕХТЕ РЕЕҒІХ 5АМЕ 509 
ЕХТЕ КЕЕ5 509 

ЕХТК 8КІР 509 

ехігасі() 509 

ЕХТВАСТО 841 
ехігасіСопќепіѕ() 345 


Е 


false 214, 220, 225, 236, 452, 454 


FancyIndexing 416 
fantasy 112 
Ғагћеѕі-согпег 137 
farthest-side 137 
favicon.ico 33 
fclose() 671, 711 
feof() 673, 711 
Респ аггау() 801 


fetch аѕѕос() 802 

Ғессһ објесі() 803 
fetch_row() 802 
fflush() 671 

fgete() 673 

fgetesv() 681 

fgets() 673, 708, 711 
FIELD() 853 

Не _count 801 

Не 70 

ЕШЕ 773 

НШе() 673, 706, 710 
ЕШЕ АРРЕМО 672 

Ше ехісіз() 685 

Ше гей сопќепіѕ() 673, 706, 709 
ЕШЕ ІСМОКЕ МЕУУ ІЛМЕ8 673 
Ше рш сопіепіѕ() 672 
ЕШЕ 5КІР ЕМРТҮ ІЛМЕ8 673 
ЕШЕ 9$Е_ ІМСІД/ОЕ РАТН 672, 673 
Шеайте() 686 
filectime() 686 

FileInfo 421 
filemtime() 686 

Files 407 

filesize() 685 
FilesMatch 407 

ЕШО 247, 377 

ШЕес() 374 

НИЗ 372 

ШТех() 375 

filter 174 

Н\ ег 256 

final 615 

finally 312, 662, 663 
find() 256 
КІМ ІМ $ЕТО 853 
findIndex() 256 
firstChild 336 
fit-content() 163 

fixed 131, 141, 152 

flat 197 

Нех 145, 156, 159 
flex-basis 158 
flex-direction 156 
Пех-епа 160, 161 
Нех-Но\ 157 
flex-grow 158 
flex-shrink 158, 159 
flex-start 160, 161 
flex-wrap 157 
Еех-контейнеры 156 
float 150, 452, 486, 583 
ЕГОАТ 770 

floatval() 454, 490 
flock() 671 

Ноог() 241, 244, 488 
ЕГООКО( 835 

FLUSH PRIVILEGES 774 
flush) 447 
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focus() 353, 357, 361, 363 func сес аго() 587 

focusNode 342 func_get_args() 587, 588 
focusOffset 342 ћопс пит агеѕ() 587 
FoldersFirst 416 function 214, 285, 288, 297, 574, 609 
follow 34 function ехіѕі5() 581 
FollowSymLinks 410 fwrite() 671,711 

font 113, 374 

font-family 112, 114 G 

font-size 112, 114 

font-stretch 113 GD 735 

font-style 112 gd іпіо() 735 

font-variant 113 Generator 595, 597 

font-weight 113 geolocation 390 

fopen() 670, 706, 708 Geolocation 390 

for 82, 230, 250, 479, 501 georgian 139 

FOR UPDATE 813 GET 68, 459, 694, 697, 707, 708, 710, 711, 715 
for...in 233, 258 get_class() 629 

for...of 233, 251 get_class_methods() 630 
ForceType 414 get_class_vars() 630 

foreach 482, 483, 484, 500, 502, 645 get_current_user() 763 
forEach() 250 get_declared_classes() 629 
FOREIGN KEY 868 веі десІагей іпіегѓасеѕ() 641 
form 73, 78, 80, 82, 353, 357, 361, 363 веі _declared_traits() 653 
Гогтасйоп 82 веі дейпей сопѕќапіѕ() 458 
Тогта() 243, 570, 837 веі дейпей Ёпсііопѕ() 581 
огтепсіуре 82 рей ехіепѕіоп Ёипсѕ() 582 
formmethod 82 СЕТ ЕОЕМАТ() 848 
formnovalidate 82 get_headers() 701 

forms 330, 336, 351 веі Вып translation_table() 535 
formtarget 82 get_loaded_extensions() 582 
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fprintf) 672 getAttribute() 340 

fputcsv() 682 getCode() 664, 665 
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fread() 672 веісуа() 689 
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ЕКОМ _РАУ5() 843 getFile() 665 
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fromElement 326 getImageData() 384 

fseek() 675 getimagesize() 739 

fsockopen() 710 getItem() 388 
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getMonth() 281 
getOffset() 569 
getPrevious() 665 
getRangeAt() 343, 344 
getReturn() 597 
getSeconds() 282 
getSelection() 342 
getTime() 281 
getTimestamp() 570 
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getTimezoneOffset() 282 
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getUTCMonth() 281 
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GLOBAL 811,812 
globalAlpha 384 
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gone 413 

goto 485 
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grid-template-areas 169 
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@па-контейнер 162 
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СКООР СОМСАТ() 859, 860 


Н 


Н.264 87 

hard 78 

hasAttribute() 340 
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hash 333 
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HAVING 784 

head 334 
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һеайег() 698, 729, 737 
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НеадегМате 418 
Һеайегѕ 115(0 703 
headers_sent() 703 
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һехйес() 489 

hidden 70, 90, 124, 147, 154, 196 
hide 142 

high 85 

highlight Ніе() 762 
highlight ѕігіпо() 762 
history 329, 333 
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host 333 
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һовіпате 333 
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hosts 429 

HOUR() 840 

href 52, 54, 66, 95, 333 
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hsla() 100 
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htdocs 404 
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html entity_decode() 535 
htmlentities() 535 
htmlspecialchars() 534, 729 
htmlspecialchars Чесо4е() 535 
НТМІТаЫе 417 
НТМГ-эквиваленты 42, 534 
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НТТР 694 
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НТТР СООКІЕ 704 
НТТР КЕҒЕКЕК 459 
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ісопу типе епсо4е() 538 
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if 225, 473,474 
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IfModule 407 
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imagearc() 747 
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Предметный указатель 
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imagecreatetruecolor() 736, 737, 754 
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imageellipse() 747 
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imagefilledarc() 748 
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imagefilltoborder() 744 
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о бе Оо По бе] 


- 


ыыы ыыы ы ыыы ы 


Предметный указатель 


МС ЕПТЕВ ВАІСНТМЕЅ5 760 
МС ЕПТЕК СОГОКІ7Е 760 
МС ЕПЛЕВ СОМТВАЅТ 760 
МС ЕПТЕК ЕРСЕрЕТЕСТ 760 
МС ЕПЛЕВ ЕМВО$$ 760 

МС ЕПТЕК GAUSSIAN_BLUR 759 
МС ЕПТЕК СКАҮЅСАІЕ 760 
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МС ЕПЛЕВ МЕСАТЕ 760 

МС ЕПТЕК РІХЕГАТЕ 760 
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МС ЕПЛЕВ 5МООТН 759 

МС ЕЦР ВОТН 761 

МС ЕШР НОКІ/ОМТАІ. 761 
МС _FLIP_VERTICAL 761 
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implements 635, 638 

implode() 510, 537 

important 97 
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IN 780, 821, 866 

IN BOOLEAN МОРЕ 832 

IN NATURAL LANGUAGE МОРЕ 832 
іп атау() 512,513 

include 577, 580, 631 

Include 406 

include_once 580 

include_path 430 

Includes 410 

includes() 255 

IncludesNOEXEC 410 
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іпдех 34, 357 

INDEX 774, 790 

Indexes 410, 414, 421 
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Ілдехірлоге 418 
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IndexOrderDefault 418 
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ІМЕТ АТОМ() 858 

ІМЕТ МТОА() 858 

ПМЕ 492 
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іші ве) 764 

ші сей а) 764 

іші зе 655, 656, 763 
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inline 145 
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inline-grid 145, 162 
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InnoDB 776, 806, 830, 868 
innodb _ft тах іоКеп size 831 
innodb В min token _size 831 
INSERT 773, 778, 865 
INSERT() 854 
insertBefore() 337 
insertCell() 339 
insertNode() 345 
insertRow() 339 

inset 125, 178 

inside 139 

instanceof 306, 624, 642 
insteadof 649 

ПМУТКО 852 

int 452, 486, 583 

INT 770 

integer 452, 486 
INTEGER 770 
interactive 334 

interface 634 
interface_exists() 641 
INTERNAL 848 
internal _encoding 521, 522 
intval() 454, 489 
invert() 176 

IS NOT NULL 780, 820 
IS NULL 780, 820 
is_array() 453, 483 
is_bool() 453 
is_callable() 594 
is_dir() 690 

is_double() 453 
is_executable() 684 
is_file() 685, 690 
is_finite() 492 

is_float() 453 
IS_FREE_LOCK() 859 
is_infinite() 492 

is_int() 453 

is_integer() 453 
is_iterable() 483 
is_link() 690 

is_nan() 493 

is_null() 453 
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is_readable() 684 
is_resource() 453, 674 
is_string() 453 
IS_USED_LOCK() 859 
is_writable() 684 
isArray() 247 
isCollapsed 342 
isFinite() 239, 245 
isInteger() 238 

isNaN() 239, 245 

ISO 848 

1508859-5 524 
isPointInPath() 379 
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isset() 454, 459, 496, 514,627 
italic 112 

iterable 584 

Iterator 646 
iterator_to_array() 596 
IteratorAggregate 645 


J 


JavaScript 202 

JIS 848 

JOIN 786 

join() 254, 511, 537 

JPEG 48, 736, 741 

jQuery 211 

jQuery UI 211 

JSON 878, 879 
]зоп_4есо4е() 883 

јѕоп епсойе() 882 
JSON_ERROR_CTRL_CHAR 884 
15ОМ ЕККОК БЕРТН 883 
ЈЅОМ ЕККОК МОМЕ 883 


Ј50№ ЕККОК ЅТАТЕ МІ5МАТСН 883 


ЈЅОМ ЕККОК ЅҮМТАХ 884 

ЈЅОМ ЕККОК _UTF8 884 

ЈЅОМ КОКСЕ ОВЈЕСТ 883 

ЈЅОМ НЕХ АМР 882 

15ОМ НЕХ АРОЅ 883 

ЈЅОМ НЕХ QUOT 883 

ЈЅОМ НЕХ ТАС 882 
json 1а5% еггог() 883 

ЈЅОМ МОМЕКІС СНЕСК 883 
15ОМ РКЕТТҮ РЕІМТ 883 

ЈЅОМ ОМЕЅСАРЕР ЅГАЅНЕЅ 883 
ЈЅОМ ОМЕЅСАРЕР ОМСОПЕ 883 
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justify-content 160, 161, 170, 171 
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КеерАПуе 412 
КеерАіуеТітеои 412 
Кеу 327 

КЕУ 790 

Кеу() 502, 595, 646 
КеуСоде 327 
keywords 33 

kind 88 

KOI8-R 524 
krsort() 506 

ksort() 506 
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label 80, 88 
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LanguagePriority 412 
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large 112 
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LAST INSERT 100 856 


lastChild 336 
lastIndex 272 
lastIndexOf() 255, 266 
lastModified 334 
Last-Modified 697 
latitude 391 

ІС АШ. 525 

ІС COLLATE 525 
ІС СТҮРЕ 525 

ІС МОМЕТАКУ 525 
ІС МОМЕКІС 525 
ІС ТІМЕ 525 

Іс бте патеѕ 849 
ГСАЗЕ() 851 
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LimitExcept 407 
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line-height 113, 115 
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ІшеТо() 377 
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Listen 409 

list-item 139, 145 
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LN2 239 
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loading 334 
localeCompare() 265 
localStorage 388 
localtime() 564 
LOCALTIME() 838 
LOCALTIMESTAMP() 838 
ГОСАТЕ() 853 
location 327, 329, 333, 334 
Location 407, 697 
LocationMatch 407 
LOCK IN SHARE МОРЕ 813 
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ГОСК ЕХ 671, 672 
LOCK_NB 671 
LOCK SH 671 
LOCK _UN 671 
log() 240, 488 
LOG() 836 
log_errors 431, 656 
10210() 488 
LOG10() 836 
LOG10E 240 
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ГОС2Е 240 
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maxLength 353 
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МахЅрагеЅегуегѕ 411 
MaxSpareThreads 411 
MaxThreads 411 

max-width 147, 200 

МВ САЅЕ І.ОУЕВ 526 
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md5() 539 
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MEDIUMINT 770 
MEDIUMTEXT 771 
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method 68, 69, 351, 352 
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Microsoft. XMLHTTP 872 
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oncontextmenu 324 
ondblclick 324 
ondurationchange 370 
onemptied 370 
опеп4е4 370 

опеггог 370 

опѓосиѕ 327, 353, 357, 361, 363 
опіпри 328 

опіпуаПа 328 
onkeydown 326 
опКеургев 326 
onkeyup 326 

onLine 332 

onload 206, 323 
onloadeddata 370 
onloadedmetadata 370 
onloadstart 370 
onmousedown 324 
onmousemove 324 
onmouseout 324 
onmouseover 324 
оптоизеир 324 
onmousewheel 324 
опраизе 370 

опр!ау 370 

опр!ауше 370 
onprogress 371 
onratechange 371 
onreadystatechange 875, 876 
опгеѕеї 327, 352 
опгевіге 323 

onscroll 323 

опѕеекеа 371 
onseeking 371 
onselect 324 

onstalled 371 
onsubmit 327, 352 
ontimeupdate 371 
onunload 323 
onvolumechange 371 
onwaiting 371 
onwheel 324, 326 
opacity 175 

opacity() 175 

ореп 41 

ореп() 330, 873, 874 
орепай() 689 
ореп-диое 105 
OPTIMIZE TABLE 781 
optimum 85 

options 357 


902 


Options 409, 414, 421 
ОК 780, 822 

ога() 520, 852 
order 162 

Order 426 

ORDER ВУ 782 
orientation 200 
outerHeight 330 
outerWidth 330 
outline 129 

оц ше-со]ог 129 
оц те-о зе 129 
outline-style 129 
outline-width 129 
output_buffering 447, 448 
outset 125 

outside 139 
overflow 147 
overflow-wrap 120 
overflow-x 148 
overflow-y 148 
overline 118 


Р 


padding 124, 142 
padding-bottom 124 
padding-box 132, 133 
padding-left 123 
padding-right 123 
padding-top 124 

pageX 325 

pageXOffset 330 

pageY 325 

рареҮ Offset 330 

parent 331, 615, 647, 651 
parentElement 339 

рагеп Моде 336 

рагзе() 280, 879 

рагзе ш10 705 
РагзеЕггог 765 
parseFloat() 223, 239, 242 
рагвеіп() 223, 239, 241 
password 70 
PASSWORD_BCRYPT 539 
PASSWORD_DEFAULT 539 
password һаѕһ() 539 
password уегіѓу() 539 
pathname 333 

pattern 73, 365 
patternMismatch 366 
pause() 370 

paused 186, 369 

рс 98 

РСКЕ 544 
PERIOD_ADD() 846 
PERIOD ПІЕЕ() 847 
Регі 403 

permanent 413 


Предметный указатель 


perspective 193 
регзресйуе() 193 
perspective-origin 195 

РНР 395, 429, 439 

РНР Ехрегі Editor 26 
php.ini 429 

рһр Нар 765 

РНР ІМТ МАХ 486 

РНР ІМТ МІМ 486 

РНР ІМТ 817Е 486 

php _mysqli.dll 793 
PHP_OS 457 
PHP_QUERY_RFC1738 706 
PHP_QUERY_RFC3986 706 
PHP_URL_FRAGMENT 705 
PHP_URL_HOST 705 
РНР ОВГ. РАЗ$ 705 
РНР ПВГ. РАТН 705 
РНР ПВГ. РОВТ 705 
РНР_ОВГ ОСЕКҮ 705 
РНР Т/КІ, 5СНЕМЕ 705 
РНР ТІКІ, ОЅЕК 705 
php_value 765 

РНР УЕК5ІОМ 457, 763 
phpinfo() 763 

PHPINIDir 431 
phpMyAdmin 395, 401, 435 
PHPSESSID 730, 731 
phpversion() 763 

physical 355 

РІ 239 

pi() 487 

PIO 836 

РіаЕ е 409 

ping 396 

placeholder 73, 78, 365 
platform 332 

play() 370 

playbackRate 369 

РМС 48, 736 

ма АШ, ЕШЛЕВ$ 738 
Ма ЕПЛЕВ_АУС 738 
Ма ЕШТЕВ М№ОМЕ 738 
Ма ЕШТЕК_РАЕТН 738 
Ма _FILTER_SUB 738 
NG _FILTER_UP 738 
NG_NO_FILTER 738 
pointer 143 

poly 65 

pop() 252 

port 333 

portrait 200 

position 151 

Position 391 

POSITION() 852 
PositionError 391 
POSITIVE_INFINITY 237, 244 
POSIX 544 


a a a a a a 


POST 69, 460, 694, 697, 709, 712, 717 


Предметный указатель 


рові-сһеск 700 

ровіег 87, 368 

роу/О 240, 487 
РОУ/() 836 

Pragma 697 

рге 119 

рге-сһесіс 700 
preg_grep() 563 
РКЕС СЕКЕР ІМУЕЕТ 563 
preg_match() 557, 559 
ргев, таќсһ а) 559 


РВЕС ОЕЕЗЕТ САРТОВЕ 558, 560 
PREG РАТТЕКМ ORDER 559 


ргев, гер!асе() 560 
preg_replace_callback() 561 
РЕЕС 5ЕТ ОКрЕВ 559 
ргев, зрШ 537, 562 


РКЕС ЅРІЛТ РЕММ_САРТОВЕ 562 
РВЕС ӚРІЛТ МО ЕМРТҮ 562 
РВЕС 5РИЛТ ОЕЕЅЕТ САРТОВЕ 562 


pre-line 120 

preload 86, 87, 368 
ргезегуе-З4 197 
ргеу() 502 
preventDefault() 318 
previousSibling 336 
pre-wrap 120 
РКІМАКҮ КЕУ 775, 790 
print 96, 198, 446 
print_r() 511, 625, 668 
printf() 446, 539 
private 607, 609 
PROCESS 774 
progress 143 

prompt() 210, 330 
ргорегіу ехізів() 630 
propertyIsEnumerable() 305 
protected 607, 609 
protocol 333 
prototype 306 
Prototype 211 

pt 98 

public 607, 609 

push() 251 
putImageData() 386 
px 98 


Q 


quadraticCurveTo() 378 
QUARTER() 842 

query() 797 
QUERY_STRING 459 
querySelector() 335, 340 
querySelectorAll() 335, 340 
ОПОТЕО 854 
Quoted-Printable 538, 719 
quotes 105 


К 


гад 100 

га424ес() 489 
radial-gradient() 136 
RADIANS() 837 

radio 70, 725 

RANDO) 837 

random() 244 

random іп(О 491 

range 72, 76 

Range 344, 345 

range() 510 

rangeCount 342 
rangeOverflow 366 
rangeUnderflow 366 
rawurldecode() 537 
rawurlencode() 537 
READ COMMITTED 811 
READ ONLY 808 
READ UNCOMMITTED 811 
READ WRITE 808 
read_and_close 732 
readdir() 690 

readfile() 673 
ReadmeName 418 
readonly 71, 78 
readOnly 353 
readyState 334, 368, 876 
REAL 770 

REAL AS_FLOAT 770 
real_escape_string() 803, 804 
realpath() 685 

rect 65 

rect() 379 

Redirect 413 
RedirectMatch 413 
RedirectPermanent 413 
RedirectTemp 413 
reduce() 257 
reduceRight() 257 
Referer 697 

referrer 334 

refresh 33 

RegExp 267, 268, 270 
REGEXP 821, 827 

rel 95 

relatedTarget 326 
relative 151 

RELEASE 808, 812 
RELEASE І/ОСҚ() 858, 859 
RELOAD 774 

reload() 333 

rem 98 
REMOTE_ADDR 459 
REMOTE_USER 459 
removeAllRanges() 343 
removeAttribute() 340 


903 


904 


КетоуеСһагве( 412 
removeChild() 338 
RemoveEncoding 414 
тетоуеЕхепй л${епег() 316 
КетоуеНапег 415 
removeltem() 388 
RemoveLanguage 412 
гетоуеКап?е() 343 
КетоуеТуре 414 
КЕМАМЕ 782 

гепате() 685, 689 
REPAIR TABLE 781 
repeat 130, 327 

repeat() 163 

ВЕРЕАТ() 852 
REPEATABLE READ 811 
repeating-linear-gradient() 135 
repeating-radial-gradient() 137 
repeat-x 130 

repeat-y 130 

REPLACE 779 

replace() 267, 269, 333 
ВЕРГАСЕ() 853 
replaceChild() 338 
REQUEST_METHOD 459 
request_order 458, 460, 704 
REQUEST_TIME_FLOAT 574 
require 577, 580, 631 
Require 421, 424 
require_once 580 
RequireAll 425 
RequireAny 425 

required 73, 74, 78, 80, 365 
RequireNone 426 

reset 70, 82 

reset() 352, 502 

resize 79, 149 

resolution 200 
resolvedOptions() 243 
resource 452 

responseText 876 

restore() 382 

RESTRICT 868, 870 
return 286, 575, 598 
returnValue 318 

reverse 185 

reverse() 252 

ВЕУЕКЗЕ() 851 

reversed 47 

REVOKE 774 

rewind() 646, 675 
rewinddir() 690 

rgb() 99 

rgba() 99 

ridge 124 

right 116, 131, 150, 152 
RIGHT JOIN 788 
RIGHT 851 


Предметный указатель 


ВЫКЕ 821, 827 
rmdir() 689 
robots 34 
robots.txt 35 
ROLLBACK 807, 808, 812 
гоПБаск() 814 
rotate() 191, 382 
rotate3d() 194 
гобаіе Х(), rotateY(), rotateZ() 194 
round 131 
round() 241, 488 
ROUNDO) 835 
тоуу 156, 165 
rowIndex 338 
тоуу-гевіге 143 
гоуу-геуегве 156 
rows 77, 338 
rowspan 59 
RPAD() 852 
rsort() 505 
rtrim() 533 
ЕТЕІМ() 851 
running 186 


5 


sandbox 61 

sans-serif 112 

ваішга(е() 176 

зауе() 382 
SAVEPOINT 812 
scalar 624 

ѕсаІе() 190, 382 
scale3d() 194 

зсаех() 189 

scaleY() 190 

scaleZ() 194 

scandir() 690 
SCANDIR _SORT_ASCENDING 690 
SCANDIR _SORT_DESCENDING 690 
SCANDIR_SORT_NONE 690 
ScanHTML Titles 417 
screen 96, 198, 329, 332 
screenX, screenY 330 
ScriptAlias 413 
ScriptAliasMatch 413 
scripts 330, 336 

scroll 131, 147 
scrollBy() 330 
scrollIntoView() 340 
scrollTo() 330 

scrollX 330 

scrollY 330 

search 72, 333 

search() 266, 268 
SEC_TO_TIME() 843 
SECOND() 840 
sectionRowIndex 338 


Предметный указатель 


5ЕЕК СОК 675 

ЅЕЕК ЕМ 675 

ЅЕЕК 5ЕТ 675 

seeking 369 

ѕееоег 413 

ЗЕГЕСТ 773, 782, 784, 860 
select() 353 

ѕеІесі аЫ() 796 
selectAllChildren() 343 
selected 80, 357 
selectedIndex 357 
selectedOptions 357 
selection 342, 344 
selectionEnd 343, 365 
з@есйоп $ “ам 343, 365 
select-multiple 357 
selectNode() 345 
selectNodeContents() 345 
select-one 357 

self 331, 617, 620, 623, 647 
ѕепа() 597, 874, 875 
зеп4-аз-15 415 

sendmail 718 

separate 140 

ѕеріа() 176 

se-resize 143 

SERIAL 770 

Serializable 644 
SERIALIZABLE 811 
serialize() 511, 642-644 
serif 112 

бегуег 697 

ServerAdmin 408 
зегуег-шЮ 415 
ServerName 408 
ЅегуегКооѓ 408 
server-status 415 
SESSION 811,812 
session.auto_start 730 
ѕеѕѕіоп.сасһе ехріге 730 
session.cookie_lifetime 730 
ѕеѕѕіоп.сооКіе ра(һ 730 
session.name 730 
веввіоп.5ауе Рап ег 730 
ѕеѕѕіоп.ѕауе ра 429, 730 
session.use_cookies 730 


ѕеѕѕіоп.иѕе ошу сооКіеѕ 730, 731 


ѕеѕѕіоп.иѕе ігап 514 730, 731 
$е5$10п_4езгоу() 732 
ѕеѕѕіоп 14() 731 
session_name() 732 
session_start() 731, 732 
session_unset() 732 
ѕеѕѕіоп _write_close() 732 
sessionStorage 388 

Set 260 

ЗЕТ 771, 861 

ЗЕТ МАМЕ$ 797 

SET NULL 868 


SET TRANSACTION ISOLATION LEVEL 810 


set_charset() 797 
set_error_handler() 657 
setAttribute() 340 
Set-Cookie 697 
setcookie() 704 
setCustomValidity() 366 
setDate() 569 

setEnd() 345 
setEndAfter() 345 
setEndBefore() 345 
SetHandler 415 
setInterval() 284 
setItem() 388 
setLineDash() 373 
setlocale() 525 
setrawcookie() 704 
setRequestHeader() 873 
setSelectionRange() 344 
setStart() 345 
setStartAfter() 345 
setStartBefore() 345 
setTime() 569 
setTimeout() 284 
setTimestamp() 569 
setTimezone() 569 
settype() 454 

SHA() 855 

5һа10 539 

5НА1( 855 

ЅНА2() 855 
shadowBlur 384 
5һадоууСоіог 384 
shadowOffsetX 384 
shadowOffsetY 384 
shape 65 

$0 252 

shiftKey 327 
short_open_tag 429, 444 
show 142 

SHOW CHARACTER SET 776 
SHOW COLLATION 776 
SHOW COLUMNS 777 
SHOW DATABASES 774 
SHOW ENGINES 776 
SHOW GRANTS 775 
SHOW INDEX 792 
SHOW TABLES 777 
SHOW VARIABLES 831 
showModalDialog() 330 
shuffle() 505 
SHUTDOWN 774 

SID 731 

sideways-lr 121 

SIGNO) 837 

sin() 241, 488 

SINO) 834 

size 41, 74, 79, 357, 688 
sizeof() 495 


906 


sizes 49, 50 

5Кеуу() 190 

skewX() 190 

skewY() 190 

ЗКуре 396 

$еер() 572 

$Нсе() 249, 254, 264 

small 112 

small-caps 113 

smaller 112 

SMALLINT 770 

soft 78 

solid 118, 124 

ЗОМЕ 866 

ѕоте() 256 

sort() 252, 505 

ЅОВТ ПАС САЗЕ 506 
ЅОВТ ГОСАТЕ 8ТЕІКС 506 
ЅОКТ МАТОКАІ 506 
ЅОВТ МОМЕКІС 506 
ЅОВТ КЕСІЛ.АК 506 
SORT_STRING 506 

source 272 

зрасе 131 

ЗРАСЕ() 852 

ѕрасе-агоџпа 160, 170, 171 
space-between 160, 170, 171 
врасе-еуепіу 160, 170, 171 
зрап 59, 167 

speech 198 

speed 391 

өрі ащюоа4 геріѕіег() 628, 636 
splice() 252 

split() 267, 270 

ѕргіпҚ) 490, 491, 540 

SQL 766, 771 

ЗОГ, САГС ЕООМЮ КОМ 857 
54110 240, 488 

ЗОВТО 836 

ЅОВТІ 2 240 

5ОКТ2 240 

square 138 

гс 49, 60, 70, 86-88, 204, 206, 368 
вгсаос 60 

гс етепЕ 317 

srclang 88 

srcset 49, 50 

s-resize 143 

SRVROOT 410 

start 47, 116, 170, 171 
START TRANSACTION 807 
START_TO_END 345 
START_TO_START 345 
startContainer 344 
startOffset 344 

StartServers 411 
startsWith() 266 
StartThreads 411 


Предметный указатель 


stat() 686 

static 151, 304, 592, 618, 620 
status 330, 876 

stdClass 624 

step 72, 76, 365 

step-end 181 

stepMismatch 366 

steps() 180 

step-start 181 

sticky 152 

stopPropagation() 321 

Storage 388 

$ ра4() 448 

іт герІасе() 532 

ӨТЕ ТО РАТЕ() 847 

stremp() 507, 529 

ЗТЕСМР() 854 

strcoll() 529 
stream_context_create() 707 
stream_context_get_default() 709 
stream_context_get_options() 708 
stream_context_get_params() 709 
ѕігеат сопќехі зеё деѓашіі() 710 
ѕігеат сопќехі ѕеі орНоп() 709 
ѕігеат сопќехі ѕеі рагатѕ() 709 
stream 5е( МосКіпе() 711 
stream _set_timeout() 711 

stretch 160, 161, 171 

strftime() 567 

Strict 32 

strict_types 584 

string 214, 261, 452, 515, 583 
String 261, 268 

stringify() 881 

strip_tags() 533 

stripos() 531 

stripslashes() 534 

strlen() 524 

strncmp() 529 

stroke() 377 

strokeRect() 374 

strokeStyle 372 

strokeText() 375 

strpos() 531 

strtolower() 526 

strtoupper() 526 

strval() 454 

style 79, 90, 92, 242, 341 
stylesheet 96 

sub 117 

sub() 571 

SUBDATE() 844, 846 

subgrid 145, 162 

submit 70, 81, 725 

submit() 352 

substr() 264, 528 

SUBSTR() 851 
substr_compare() 529 


Предметный указатель 


substring() 264 
SUBSTRING() 851 
SUBSTRING_INDEX() 853 
SUBTIME() 846 

subtitles 88 

SUM() 783 

зирег 117, 303 
SuppressColumnSorting 417 
Зирргез$ОезсирНоп 417 


Зирргез3 НТМЕРгеатЫе 417, 418 


SuppressIcon 417 
SuppressLastModified 417 
Зирргезз Кез 417 
SuppressSize 417 
surroundContents() 345 
ЅУС-графика 51 

switch 228, 476, 478 
sw-resize 143 
SymLinksIfOwnerMatch 410 
SYSDATE() 839 


T 


tabindex 90 

table 145 

table-caption 145 
table-cell 145 
table-column 145 
table-column-group 145 
table-footer-group 145 
table-header-group 145 
table-layout 141 
table-row 145 
table-row-group 145 
tagName 339 

tan() 241, 488 

TANO) 834 

target 54, 62, 66, 69, 317, 352 
tBodies 338 

tel 71 

temp 413 

test() 270 

text 36, 70, 143, 357 
TEXT 771 
TEXT_NODE 336 
text-align 37, 115, 141 
textAlign 375 
text-align-last 116 
textBaseline 375 
text-bottom 117 
textContent 339 
text-decoration 117 
text-decoration-color 118 
text-decoration-line 118 
text-decoration-style 118 
text-indent 115 
text-overflow 149 
text-shadow 176, 177 


text-top 117 
text-transform 118 
tFoot 338 

tHead 338 

thick 126 

thin 126 

this 246, 300, 301, 316 
ThreadsPerChild 411 
throw 313, 663 
Throwable 661, 664 
TIFF 741 

time 73 

TIME 771 

time() 564, 840 
TIME_FORMAT() 848 
ТІМЕ ТО ЅЕС() 843 
ТІМЕПІЕЕ() 846 
timeout 392 

Timeout 412 
timeStamp 317 
ТІМЕЅТАМР 771 
ТІМЕЅТАМР() 847 
ТІМҮВІ.ОВ 771 
ТІМҮТМТ 770 
ТІМҮТЕХТ 771 

title 90, 334 
tmp_name 688 
TO_DAYS() 843 
toElement 326 
toExponential() 238, 243 
toFixed() 238, 243 
toISOString() 281 
toLocaleLowerCase() 264 


toLocaleString() 238, 242, 255, 280 


toLocaleUpperCase() 264 
toLowerCase() 264 

tooLong 366 

top 58, 116, 131, 141, 152, 331 
toPrecision() 238, 243 


toString() 224, 237, 242, 254, 261, 280, 300, 307, 


342, 345 
touch() 686 
toUpperCase() 261, 264 
toUTCString() 281 
TrackModified 417 
TRAILING 850 
trait 647 
trait _exists() 652 
transform 188 
transform-origin 192, 197 
transform-style 197 
transition 181 
Transitional 32 
transition-delay 179 
transition-duration 178 
transition-property 179 
transition-timing-function 180 
translate() 189, 382 


907 


908 Предметный указатель 


translate3d() 194 upload_tmp_dir 429 
translateX() 189 ОРРЕВ() 851 
translateY() 189 иррег-а рва 138 
translateZ() 194 uppercase 118 
transparent 113, 130 upper-latin 138 
Тгауегза е 645 иррег-готап 138 
ігіррег еггог() 657 url 71 
trim() 266, 533 URL 334 
ТКІМ() 850 url() 105 
trimLeft() 266 шійесойе() 537 
trimRight() 266 шіепсойе() 537 
ігие 214, 220, 225, 226, 236, 452, 454 ОВГ-адрес 
ігиле() 241 9 абсолютный 53 
TRUNCATE TABLE 781 © относительный 53 
ТКОМСАТЕ() 835 USA 848 
try 658, 663 USAGE 773 
try...catch 312 use 593, 602, 603, 606, 647, 649-652 
ТТЕ 114 USE 773 
turn 100 useGrouping 243 
type 46, 70, 71, 81, 88, 203, 317, 353, 357, 361, 363, 687 изетар 65 
ТуреЕтгог 583, 584 user 422 
іуре-тар 415 USER() 856 
typeMismatch 366 user_agent 707 
typeof 215 userAgent 331 
ТурезСопй? 414 User-agent 35 
User-Agent 694, 697 
и UserDir 408 
USING 787, 788 
пазог() 507 нд, Ti 
UCASE() 851 E 
() 280 

ПСВ ОТС РАТЕ() 839 
4. ОТС ТІМЕ() 839 
Оо н о 
ОМСОМРВЕЗЗЕР ТЕМСТНО 854 DUDO 859 
undefined 214, 215, 247 Лр 5НОКТ() 859 
underline 118 
ОМНЕХО 854 
UNIQUE INDEX 790 ү 
UNIQUE KEY 790 
UNIX 683 valid 366 
UNIX_TIMESTAMP() 839 valid() 595, 646 
unlink() 685 validationMessage 366 
UNLOCK TABLES 813 validity 366 
unserialize() 511, 642—644 ValidityState 366 
unset() 455, 463, 627 valid-user 421 
unshift() 252 valign 58 
UNSIGNED 770 value 47, 71, 72, 74—76, 80, 82, 85, 353, 357, 361, 363 
UPDATE 773, 780 valueMissing 366 
UPLOAD_ERR_CANT_WRITE 688 valueOf() 237, 261, 281, 308 
UPLOAD ERR EXTENSION 688 var 213 
UPLOAD_ERR_FORM_SIZE 688 var_dump() 452, 462, 511, 625, 668 
UPLOAD ERR INI SIZE 688 VARBINARY 771 
UPLOAD ЕКЕ МО FILE 688 VARCHAR 770 
UPLOAD ERR МО ТМР DIR 688 variables_order 460 
СОРІОА ЕКЕ ОК 688 VERSION() 856 
ТРІ.ОАр ЕЕЕ РАКТІАІ. 688 уегѕіоп сотраге() 763 


ирІоаа тах filesize 430, 688 Уегвіоп5ог( 417 


Предметный указатель 


vertical 79, 149 
vertical-align 116, 141 
уегИса!-Ш 121 
vertical-rl 121 
vertical-text 143 

уһ 98 

videoHeight 369 
videoWidth 369 
virtual 355 
VirtualHost 407, 427 
visibility 154 

visible 147, 154, 196 
vlink 36 

утах 98 

үшіп 98 

void 584 

volume 369 
vprintf() 540 
vsprintf() 540 

ууу 98 


W 


wait 143 

Warning 654 
watchPosition() 393 
WAV 86 

wavy 118 

WebM 87 
Web-6paysep 25 
Web-crpannna 25 
week 73 

WEEK() 842 
WEEKDAY() 843 
WEEKOFYEAR() 842 
WHERE 782, 786 
while 231, 481, 503 
white-space 119 


width 41, 49, 52, 57, 60, 87, 141, 147, 200, 332, 367, 


369, 371 
willValidate 366 


window 284, 329-331, 341, 342, 388, 872 


Windows-1251 405, 442, 524 


WITH CONSISTENT SNAPSHOT 808 


WITH GRANT OPTION 774 


WITH QUERY EXPANSION 832, 834 


WOFF 114 
word-break 121 
word-spacing 115 
word-wrap 120 
wordwrap() 536 
wrap 78, 157, 355 
wrap-reverse 157 
w-resize 143 
write() 205, 335 
writeln() 335 
writing-mode 121 


X 


XAMPP 396 

XHTML 23, 417 

x-large 112 
XMLHttpRequest 871-876 
XOR 781 

X-Powered-By 703 
x-small 112 

xx-large 112 

xx-small 112 


Y 


YEAR 771 
ҮЕАВ() 840 
YEARWEEK() 843 
yield 297, 595, 596 
YUI 211 


Z 


ZEROFILL 770 
z-index 154 
zoom-in 143 
zoom-out 143 


909 


910 


А 


Абзац 37 

Абстрактный класс 616 
Абстрактный метод 616 
Автодополнение 76 
Агрегатная функция 783 
Адаптивный дизайн 198 
Анимация 178, 183 


Анонимные функции 294, 592 


Атрибут 91 

Аудио 86 
Аудиоролик 86 
Аутентификация 730 


Б 


База данных, реляционная 766 


Базовый класс 613 
Бесконечность 492 
Блок 485 
Блокировка 812 
Брандмауэр 400 
Буферизация 447 


В 


Ввод данных 210 

Видео 86 

Видеоролик 87 
Виртуальный сервер 427 
Внешний ключ 767, 868 
Выбор базы данных 795 
Выделение 342 
Выравнивание 

© вертикальное 116 

9 горизонтальное 115 


r 


Геолокация 390 
Гиперссылка 52 

0 внутренняя 54 

Ò внешние 52 
Горизонтальная линия 41 
Градиент 133 

© линейный 133, 380 

9 радиальный 136, 380 
Графика 48 


Д 


Дата 279,563 
Дата и время 838 
Дескриптор 444 


Деструктор 612 
Диалоговое окно 209, 210 


Предметный указатель 


Директива 406 
Добавление записей в таблицу 778 


Е 


Единица измерения 98 


3 


Заголовок 37 
Замыкание 295 

Записи базы данных 766 
Запрет 

© индексации 34, 35 

© кэширования 699 
Запрос 782, 796 

Ф вложенный 863, 866 
Зебра 142 

Зона 839 


Извлечение записей 782 
Изменение 

© регистра символов 118 

© структуры таблицы 781 
Изображение 48, 735 

© в качестве фона 50 

Индекс 44, 788 

© массива 245, 493 
Инициализация переменной 214 
Инкапсуляция 604, 608, 610 
Инструменты разработчика 29 
Интерпретатор 202, 439 
Интерфейс 633 

Исключение 658 

Исходный код 762 

Итераторы 645 


К 


Карта-изображение 63 

Картинка 735 

Каскадные таблицы стилей 91 
Каталог 689 

Квантификатор 551, 829 

Класс 298, 604 

Ключ 493, 788 

Кнопка 363 

Кодировка 33, 438, 520, 523, 772, 775 
Командная строка 396 

Комментарий 31, 208, 406, 429, 432, 444 
Конкатенация строк 262, 518 
Консоль 207 

Константа 456 

Конструктор 301, 611 

Контекст рисования 371 


Предметный указатель 


Контраст 175 
Курсив 43 
Курсор 142 


Л 


Листинг каталога 416 
Логическое форматирование 44 
Локаль 525 

Локальное хранилище 387 
Лямбда-выражения 295 


Маркированный список 45 
Маска прав доступа 683 
Массив 245, 493 

Ф ассоциативный 258, 493, 496 
Ф многомерный 248, 497 

© суперглобальный 458 
Медиазапросы 50, 198 
Метасимвол 547 

Метка порядка байтов 443 
Метод 299, 604, 609 
Многоколоночный текст 172 
Множество 512 


Н 


Наследование 303, 604, 613 
Насыщенность 175 
Негатив 176 
Нормализация 769 
Нумерованный список 46 


O 


Область видимости 590 
© переменных 291 
Обновление записей 780 
Обработчик события 314 
Обьект 605 
Объектная модель документа 329 
Объектно-ориентированное программирование 

(ООП) 604 
Округление чисел 488 
2. 463 

математические 216, 463, 818 

5 побитовые 218, 465, 819 
9 приоритет 221, 470 
© присваивания 219, 467 
© сравнения 220, 468, 820 
Отладка 313, 669 
Отладчик 669 
Отображение элементов 154 
Отступ 121 
© первой строки 115 


911 


Ошибка 

0 времени выполнения 311 
9 логическая 311 

Ф синтаксическая 310 


П 


Параметр тега 24 

Пароль 539, 721 
Первичный ключ 767 

0 составной 769 

Перевод строки 42 
Переключатель 725 
Переменная 451, 860 

9 глобальная 590 

© локальная 590 

© статическая 592 
Переменные 213 

© окружения 458 

© переменных 463 

© сервера 410 
Перенаправление 413, 698 
Поверхностная копия объекта 606 
Подключение к базе данных 794 
Позиционирование 151 
Поиск по шаблону SQL 824 
Поле 604 

© базы данных 766 
Полиморфизм 604, 619 
Полномочия 773 
Полужирный шрифт 43 
Пользователь базы данных, создание 773 
Права доступа 683 
Приведение типов 454, 624 
Привилегии 773 

Приоритет 822 
Производный класс 613 
Пространства имен 308, 599 
Прототипы 306 
Псевдоклассы 107 
Псевдоэлементы 104 


Р 


Разбиение на строки 209 

Раздел НТМІ.-документа 

9 BODY 35 

9 HEAD 32 

Размер массива 245, 493 

Размеры 146 

Размытие 175 

Рамка 124 

Регулярные выражения 426, 544, 827 
Рекурсия 298, 598 


912 


С 


Свойство 299, 604, 607 
Селекторы 101 
Семантическая разметка 38 
Сепия 176 

Сессии 730 

Сессионное хранилище 387 
Символическая ссылка 463 
Скрипт 202, 439 

Скругление углов 127 
Случайное число 244 
Событие 314 

Создание базы данных 772 
Специальный символ 262, 516 
Списки определений 48 
Список 45, 138, 493 

© автодополнения 76 

© элемент управления 79, 723 
Ссылка 143, 462 

Стиль 91 

© встраивание в HTML 92 
Стрелочные функции 295 
Строгая типизация 584 
Строка 260, 515 

Структура НТМГ-документа 31 
Субтитры 88 

Сценарий 202 


T 


Таблица 55, 140 

© базы данных 766 

© временная 862 

© создание 775 

© стилей 91 

Таймер 284 

Тег 24 

Текстовая область 77, 722 
Текстовое поле 721 

Тень 176 

Тип данных 213, 452, 769 
9 преобразование 222, 823 
Точка 

© останова 314 

© сохранения 812 
Транзакция 806 

9 автозавершение 807 

Ф изоляция 810 
Трансформации 188, 193 
Трейты 647 
Тригонометрические функции 488 


У 


Угол 100 
Удаление записей 781 


Предметный указатель 


Ф 


Файл 669 

9 загрузка на сервер 686 
Флажок 724 

Фон 129 

Форма 67, 350,721 
Форматирование строки 539 
Фрейм, плаваюший 60 
Функция 285, 574 

© обратного вызова 594 
Функция-генератор 297, 595 


X 


Холст 371 
Хранилице 387 


Ц 


Цвет 36, 99, 176 

© текста 112 

Целостность базы данных 868 
Цикл 229, 479 

Цитата 38, 44 


Ч 


Числа 486 


Ш 


Шифрование 855 
Шкала времени 183 
Шрифт 111 

гарнитура 112 
загружаемый 114 
зачеркнутый 117 
курсивный 43 
надчеркнутый 117 
перечеркнутый 43 
подчеркнутый 43, 117 
полужирный 43, 113 
размер 112 

стиль 112 

цвет 112 


Э 


Экземпляр класса 605 


A 


Яркость 175 
Ячейки таблицы 59 


<< Фо << Фо Фо Ф Ф 


